[code="java"]
Ext.onReady(function() {
Ext.ns('app.grid');
var xg = Ext.grid;
var detailViewReader = new Ext.data.JsonReader({
idProperty: 'autoid',
root : 'items',
totalProperty: "results",
fields: [
{name: 'autoid', type: 'int',mapping:'autoid'},
{name: 'usePlanAutoId', type: 'int',mapping:'usePlanAutoId'},
{name: 'itemName', type: 'string',mapping:'itemName'},
{name: 'itemMoney', type: 'float',mapping:'itemMoney'},
{name: 'remark', type: 'string',mapping:'remark'}
]
});
var detailViewStore = new Ext.data.JsonStore({
autoLoad: true,
reader: detailViewReader,
//url : _path +"servlet/UsePlanDetailServlet?sign=json",
url : "test.json",
method : 'POST',
sortInfo: {field: 'autoid', direction: 'ASC'},
params:{
"capitalUsePlanAutoId" : ""
}
});
var pagingtoolbar = new Ext.PagingToolbar({
pageSize:_pageSize,
store:detailViewStore,
displayInfo:true,
displayMsg: '从{0}至{1}，共{2}条记录',
emptyMsg:"No records to display"
});
var detailViewGrid = new xg.GridPanel({
store: detailViewStore,
columns: [
new Ext.grid.RowNumberer(),
{
header: '内码',
dataIndex: 'autoid',
width: 40,
sortable: true
},{
header: 'usePlanAutoId',
dataIndex: 'usePlanAutoId',
width: 40,
sortable: true,
hidden : true
},{
header: '项目名称',
dataIndex: 'itemName',
width: 150,
sortable: true
},{
xtype: 'numbercolumn',
header: '金额',
dataIndex: 'itemMoney',
format: '$0,0.00',
width: 100
},{
header: '备注',
dataIndex: 'remark',
align: 'center',
width: 150
}
],
id: "usePlanDetailViewGrid",
//totalProperty:"results",
//frame: true,
width: 800,
height: 450,
//region : "center",
//clicksToEdit: 1,
collapsible: false,
//animCollapse: false,
//trackMouseOver: false,
bbar : pagingtoolbar,
//enableColumnMove: false,
iconCls: 'icon-grid'
});
var CapitalUsePlanDetail = new Ext.Panel(
{
id : "UsePlanDetailOperationWin",
title : "明细",
iconCls : "btn-operation",
width : 600,
height : 500,
closeAction: 'hide',
region : 'center',
items : [
detailViewGrid
]
});
new Ext.Viewport( {
layout : 'border',
title : 'tttt',
items : [ CapitalUsePlanDetail ],
renderTo : Ext.getBody()
})
});
[/code]
是ExtJS4吗？
用这种简单的方式定义store
先把PageToolBar去掉，看能不能正常显示
var mycolumns = []
//可以用ExtJS自动生成的序号，或是自己获取的ID号
mycolumns.push(Ext.create('Ext.grid.RowNumberer'));// 添加行号列，不需要导入外部插件
mycolumns.push( {
header : 'ID',
dataIndex : 'id',
flex : 2
});
mycolumns.push( {
header : '书号',
dataIndex : "code",
flex : 2
});
mycolumns.push( {
header : '书名',
dataIndex : "name",
flex : 2
});
mycolumns.push( {
header : '价格',
dataIndex : "price",
flex : 2
});
var bookData = Ext.create('Ext.data.Store', {
fields : ["id", "code","name","price"],
autoLoad : true,
proxy : {
type : 'ajax',
//通过web请求获取格式如下的数据，返回是这种格式的字符串就可以
/*
[{"name":"name","price":"12","code":"SBN-1111"},
{"name":"name","price":"12","code":"SBN-1111"},
{"name":"name","price":"12","code":"SBN-1111"}]
*/
url : './getBookData',
reader : {
type : 'json'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
layout : 'anchor',
disableSelection : true,
title : '书籍信息',
columns : mycolumns,
renderTo : Ext.get('reportgrid'),
store : bookData,
width : Ext.getBody().getWidth(),
height : Ext.getBody().getHeight()
});
});