Extjs gridpanel 配置大概有几个比较重要的
1.Store 数据源
2.Columns或cm 定义列渲染 , header 列名 dataIndex 数据索引 render 列渲染方法
3.ViewConfig.forceFit为true + 父窗体layout为 fit 时 可让girdpanel 自适应宽高
eg:
var gpanel = new Ext.Panel({
title: "订单查询",
layout: "fit",
items: [{
xtype: "grid",
sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
columnLines: true,
viewConfig: {
forceFit: true,
emptyText: '系统中还没有任务'
},
bbar: new Ext.PagingToolbar({}),
store: new Ext.data.JsonStore({
url: "/admin/Order",
autoLoad: true,
root:"data",
fields: ['o_OrderNo', 'o_TicketCount', 'o_PayAmount', 'o_CustomerName', 'o_IdCard', 'o_Telephone', 'o_SaleTime', 'o_Status']
}),
columns: [ { header: "订单号", dataIndex: "o_OrderNo",
width:160, sortable: true },
{ header: "票数", dataIndex: "o_TicketCount",
width: 160, sortable: true },
{ header: "金额", dataIndex: "o_PayAmount",
width: 160, sortable: true },
{ header: "用户", dataIndex: "o_CustomerName",
width: 160, sortable: true },
{ header: "身份证", dataIndex: "o_IdCard",
width: 160, sortable: true },
{ header: "手机", dataIndex: "o_Telephone",
width: 160, sortable: true },
{ header: "售票时间", dataIndex: "o_SaleTime",
width: 160, sortable: true },
{ header: "状态", dataIndex: "o_Status",
width: 160, sortable: true },
]
}]
});
Extjs 3.4 - GridPanel 配置
最新推荐文章于 2020-12-28 16:50:51 发布