ExtJs4–表格--Grid

来源:互联网 发布:好玩的rpg 知乎 编辑:程序博客网 时间:2024/04/20 14:16
1、首先定义对象:
Ext.define('log',{            extend:'Ext.data.Model',            fields:[                {name: 'id',mapping:'id'},                 {name: 'user'},                 {name: 'type'},                {name: 'time'},                {name: 'describe'}            ]        });2、定义Store:
        var logStore=Ext.create('Ext.data.Store', {            pageSize:rowNum,            model:'log',//对象            remoteSort:true,            proxy: {                type:'ajax',                actionMethods:{read:'POST'},//提交方式。post和get                url: 'log.htm?show',                extraParams:{//提交时传递的参数                 startTime:"",                endTime:""              },
               reader: {                     totalProperty: 'totalRows',//分页数据,总条数                     root: 'data'//分页list                },            simpleSortMode :true            },            sorters:[{                property:'id',//排序                direction:"ASC"            }]        });
3、定义grid:
var logGrid =  Ext.create('Ext.grid.Panel',{            columnLines: true,            width: '100%',            id: 'logGrid',            bbar:  Ext.create('Ext.PagingToolbar', {//分页工具栏                store: logStore,                id: 'pagger',                displayInfo: true,                displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',                emptyMsg: "没有数据"            }),            viewConfig: {                stripeRows: true            },            tbar: [{}],            columns:[//表头                {xtype: 'rownumberer',text:'序号',width:35,align:'left'},                {header: 'ID',width: 70,dataIndex: 'id',id: 'id',hidden: true,menuDisabled: true},                {header: '类别',width: 200,dataIndex: 'type',id: 'type',menuDisabled: false},                {header: '时间',width: 200,dataIndex: 'time',id: 'time',menuDisabled: true},                {header: '操作人',width: 200,dataIndex: 'user',id: 'user',menuDisabled: true},                {header: '描述',width: 200,dataIndex: 'describe',id: 'describe',menuDisabled: true}            ],             forceFit : true,//列自动扩展宽度            store: logStore,            autoScroll: true,            stripeRows: true        });                logStore.load({params:{start:1,limit:10}});//加载数据       //logStore.loadPage(1);//这样也行