extjs表格下的分頁條——Ext.grid.Panel 的 pagingtoolbar

兩種分頁條：每頁固定條數的分頁條 和 自定義選擇每頁內容條數的分頁條

一、每頁固定條數的分頁條

這種樣式的——

dockedItems: [{
                        xtype: 'pagingtoolbar',
                        store: store,　　　// GridPanel中使用的數據
　　　　　　　　　　　　　　dock: 'bottom',
　　　　　　　　　　　　　　displayInfo: true

}],

 

二、自定義選擇每頁內容條數的分頁條

這種樣式的——

dockedItems: [{
                        xtype: 'pagingtoolbar',
                        dock: 'bottom',
                        displayInfo: true,
                        items: ['-', '每頁', {
                            xtype: 'combobox',
                            displayField: 'id',  　　  　//獲取的內容
                            valueField: 'value',　　　 　//顯示的內容
                            editable: false,　　　　  　　//不允許編輯只能選擇
                            allowBlank: false,　　　　 　 //不允許為空
                            triggerAction: 'all',      //請設置為”all”,否則默認 為”query”的情況下，你選擇某個值后，再此下拉時，只出現匹配選項，
                                                       //如果設為”all”的話，每次下拉均顯示全部選項
                            width: 60,
                            listeners: {
                                render: function (comboBox) {
                                    comboBox.setValue(comboBox.ownerCt.getStore().getPageSize());   //使得下拉菜單的默認值是初始值
                                },
                                select: function (comboBox) {
                                    var pSize = comboBox.getValue();
                                    comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //改變PagingToolbar的pageSize 值
                                    comboBox.ownerCt.getStore().load({start: 0, limit: parseInt(pSize)});
                                }
                            },
                            queryMode: 'local',
                            store: {
                                fields: ['id', 'value'],
                                data: [['2', 2], ['5', 5], ['25', 25], ['50', 50]]
                            }
                        }, '條'],
                        store: store　　　　// GridPanel中使用的數據

}],