1,Ext.PagingToolbar:一个要和Ext.data.Store绑定并且自动提供翻页控制的工具栏
var pt = new Ext.PagingToolbar ({ afterPageText: '/ {0}',beforePageText: '页', firstText: '第一页',prevText: '前一页',nextText: '后一页', lastText: '最后一页',refreshText: '刷新', pageSize: 20,store: _store, displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,一共{2} 条', emptyMsg: "没有数据" }); pt.bind(_store);
2,Ext.grid.GridPanel:基于Grid控件的一个面板组件
var grid = new Ext.grid.GridPanel({ id:'grid', title: "数据展现", store: _store, cm: colModel, renderTo: 'gridDiv', width : 300, height: 600, collapsible:true, frame:true, loadMask:{msg:'正在加载数据,请稍侯……'}, clicksToEdit:2, selModel: new Ext.grid.RowSelectionModel(), tbar: [{ xtype : 'panel', height: 25, width : 300, bodyStyle: 'border:none', buttons:[{ text:"添加", handler:function(){} },{ text:"删除", handler:function(){} }] }], bbar: pt });
在gird配置相中配置相应的store和ColumnModel,这样数据就会在GridPanel中展现。
tbar:面板上方的工具条
bbar:为面板下方的工具条(一般为翻页工具条)