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

效果图：

示例：

<%@ 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>