文档自定义页面-分页数据页面

效果图：

示例：

<%@ page contentType="text/html; charset=utf-8"%><%String brandid = request.getParameter("documentid");String panelid = request.getParameter("panelid");String gridId = request.getParameter("gridId"); %><script language='javascript'>Ext.onReady(function(){var panelid = '<%=panelid%>';var panel = Ext.getCmp(panelid);var parentid = Ext.getCmp(panelid).ownerCt.params;// 存储字段var fields = [{name:'id', mapping:'id'},{name:'f_name', mapping:'f_name'},{name:'f_name_en', mapping:'f_name_en'},{name:'f_name_py', mapping:'f_name_py'},{name:'f_report_temp_name', mapping:'f_report_temp_name'}];var sm=new Ext.grid.CheckboxSelectionModel();// 列表字段var columns = [sm,{id : 'id',dataIndex : 'id',width:70,header : '编号'},{id : 'f_name',dataIndex : 'f_name',header : '品牌中文名称',width:120},{id : 'f_name_en',dataIndex : 'f_name_en',width:120,header : '品牌英文名称'},{id : 'f_name_py',dataIndex : 'f_name_py',width:120,header : '品牌名称全拼'},{id : 'f_report_temp_name',dataIndex : 'f_report_temp_name',width:120,header : '商品品类'}];// 数据访问var store = new Ext.data.DirectStore({directFn : BrandDirect.getBrandList,baseParams : {'limit':50, 'start':0,'value':'','brandid':<%=brandid%>},root : 'results',totalProperty : 'totals',idProperty : 'id',sortInfo: {field:'id', direction: 'DESC'},fields:fields});    // 功能条var btnRefresh = new Ext.Action({text : '刷新',iconCls : 'icon-sys-refresh',handler : function(){panel.refresh();}});var btnSave = new Ext.Action({text : '保存',iconCls : 'icon-sys-save',handler : function(){panel.save();}}); var searchForm = new Ext.form.TextField({width : 100,emptyText : '输入快速检索字符',        listeners: {        specialkey: function(field, e){            if (e.getKey() == e.ENTER) {            var value = searchForm.getValue();            store.baseParams.limit = pagebar.pageSize;            store.baseParams.start = 0;            store.baseParams.value = value;    if(Ext.isDefined(value) && value != ''){    store.load();    }            }        }    }});var btnsearch = new Ext.Action({text : '快速检索',iconCls : 'icon-sys-query',handler : function(){        var value = searchForm.getValue();        store.baseParams.limit = pagebar.pageSize;        store.baseParams.start = 0;        store.baseParams.value = value;if(Ext.isDefined(value) && value != ''){store.load();}}});    var tools = [btnSave, '-', btnRefresh,'-',searchForm,'-',btnsearch];      //分页    var pagebar = new Ext.PagingToolbar({        firstText : '首页',        lastText : '尾页',        nextText : '下一页',        prevText : '上一页',        refreshText : '刷新',        beforePageText : '第',        afterPageText : '页，共 {0} 页',        displayMsg : '共 {2} 条，当前显示 {0} 到 {1} 条',        emptyMsg : '没有符合条件的数据',            pageSize: 50,            store: store,            displayInfo: true,            items : [                '-',                '每页显示:',                new Ext.form.ComboBox({                    editable : false,                    triggerAction: 'all',                    width : 50,               store : [10, 20, 30, 40, 50],               value : 50,               listeners : {               'select' : function(c, record, index){               grid.getBottomToolbar().pageSize = c.getValue();               grid.getBottomToolbar().changePage(1);               }                   }            })            ],            plugins: new Ext.ux.ProgressBarPager({defaultText:'正在装载数据...'}),            listeners : {                'beforechange' : function(a, b){            store.baseParams.limit = b.limit;            store.baseParams.start = b.start;                }            }        });// 表格对象var grid = new Ext.grid.GridPanel({border : false,sm:sm,columns : columns,autoExpandColumn:'f_name',enableHdMenu:true,store : store,tbar : tools,contextMenu : new Ext.menu.Menu({items:tools}),bbar: pagebar,listeners : {'rowcontextmenu' : function(g, rowIndex, e){g.CheckboxSelectionModel().selectRow(rowIndex);g.contextMenu.showAt(e.getXY());}}});// 刷新panel.refresh = function(){store.reload();}// 保存属性修改panel.save = function(){var records = grid.getSelectionModel().getSelections();if(records.length > 0){var ids = '';for(var i=0;i<records.length;i++){ids += records[i].data.id+',';}BrandDirect.addChildBrand(ids,<%=brandid%>,function(result, e){if(result && result.success){MixkyApp.showInfoMessage('数据已保存','提示信息');}else{MixkyApp.showErrorMessage(result.message, '错误提示');}});}Ext.getCmp(parentid).getStore().reload();MixkyApp.desktop.closeDocument("mkSckf.docDeatailInfo",<%=brandid%>);};panel.add(grid);panel.doLayout();panel.refresh();});</script>