extjs 改变gridPanel 底部分页栏方框的大小及一页可显示的分页数方法

改变gridPanel底部分页栏方框的大小在创建的分页工具条加inputItemWidth

   var pagingbar = Ext.create('Ext.toolbar.Paging',{
        store: unitInfoGridStore,//必须得跟上面的的store来源一样
         itemId: 'pagingbar',
        displayInfo: true,
        pageSize: 10,
        dock: 'bottom',
        displayMsg:'显示第{0}条到{1}条,一共{2}条',
        firstText: '首页',
        nextText: '下一页',
        prevText: '上一页',
        lastText: '最后一页',
        refreshText: '刷新',
        inputItemWidth: 50,//这里是改变gridPanel底部分页栏方框的大小        
        items:['-','每页',pagesizeCombo(),'条'], 
       // plugins : [new Ext.ux.PageSizePlugin()],
        emptyMsg:'没有需要显示的记录' 
        
	});

//实现一页可以有选择的显示记录数
var pagesizeCombo = function(){
		return new Ext.form.ComboBox({  
		        store: new Ext.data.SimpleStore({
		            fields: ['id', 'value'],
		            data: [['10', 10], ['20', 20], ['30', 30], ['50', 50],['100',100]]
		        }),
		        mode: 'local',
		        displayField: 'id',
		        valueField: 'value',
		        editable: false,
		        allowBlank: false,
		        triggerAction: 'all',
		        width: 60,
		        listeners:{ 
		               render: function(comboBox){
		                        comboBox.setValue(comboBox.ownerCt.pageSize);   //使得下拉菜单的默认值是初始值
		
		                      }, 
		               select: function(comboBox){
		                  var pSize = comboBox.getValue();
		                   comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //改变PagingToolbar的pageSize 值
		                             
		
		 }
		        }
		    });  
		}

你可能感兴趣的:(extjs 改变gridPanel 底部分页栏方框的大小及一页可显示的分页数方法)