在網格面板中使用分頁工具欄

自從很長一段時間以來，我一直停留在這一點。請幫我確定我的錯誤。在網格面板中使用分頁工具欄

我想在網格面板中顯示數據，並且由於數據量很大，我也在使用分頁工具欄。這是我的代碼（我不確定，但我認爲問題在我創建的商店中）。

var myData = { 
    record: [{ 
     name: "Record 0", 
     column1: "0", 
     column2: "0" 
    }, { 
     name: "Record 1", 
     column1: "1", 
     column2: "1" 
    }, { 
     name: "Record 2", 
     column1: "2", 
     column2: "2" 
    }, 
    ] 
}; 
var fields = [{ 
    name: 'name', 
    mapping: 'name' 
    }, { 
    name: 'column1', 
    mapping: 'column1' 
    }, { 
    name: 'column2', 
    mapping: 'column2' 
    } 
]; 
var store = new Ext.data.Store({ 
    id: 'simpsonsStore', 
    fields: ['name', 'column1', 'column2'], 
    pageSize: 5, // items per page 
    data: myData, 
    reader: { 
    root: 'record', 
    type: 'json' 
    } 
}); 
// Column Model shortcut array 
var cols = [{ 
    id: 'name', 
    header: "Record Name", 
    width: 50, 
    sortable: true, 
    dataIndex: 'name' 
    }, { 
    header: "column1", 
    width: 50, 
    sortable: true, 
    dataIndex: 'column1' 
    }, { 
    header: "column2", 
    width: 50, 
    sortable: true, 
    dataIndex: 'column2' 
    } 
]; 
store.load({ 
    params: { 
    start: 0, 
    limit: 5 
    } 
}); 
// declare the source Grid 
var grid = new Ext.grid.GridPanel({ 
    ddGroup: 'gridDDGroup', 
    store: store, 
    columns: cols, 
    enableDragDrop: true, 
    stripeRows: true, 
    autoExpandColumn: 'name', 
    width: 650, 
    height: 325, 
    region: 'west', 
    title: 'Data Grid', 
    selModel: new Ext.grid.RowSelectionModel({ 
    singleSelect: true 
    }), 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     store: store, // same store GridPanel is using 
     dock: 'bottom', 
     displayInfo: true 
    } 
    ] 
}); 
var displayPanel = new Ext.Panel({ 
    width: 650, 
    height: 300, 
    layout: 'column', 
    renderTo: Ext.getBody(), 
    items: [ 
    grid 
    ], 
    bbar: [ 
     '->', { 
     text: 'Reset Example', 
     handler: function() { 
     gridStore.loadData(myData); 
     } 
    } 
    ] 
});

來源

2011-06-06 Ajan

歡迎使用StackOverflow！在發佈一些代碼時，您可以通過選擇它並使用編輯器工具欄中的「{}」按鈕進行格式化。現在，您的部分內容已無格式化，這是我之前編輯中已更正的內容。 – 2011-06-06 16:20:13

要開始使用外來逗號您myData.record陣列上會防止這種運行。

var myData = { 
      record : [ 
       { name : "Record 0", column1 : "0", column2 : "0" }, 
       { name : "Record 1", column1 : "1", column2 : "1" },  
       { name : "Record 2", column1 : "2", column2 : "2" }**,** 
      ] 
    };

來源

2011-06-22 14:07:44

而不是dockedItems嘗試在網格bbar設置分頁欄。 new Ext.PagingToolbar（{pageSize：20, store：store， displayInfo：true }）;

來源

2011-06-24 06:11:54

在網格面板中使用分頁工具欄

回答

相關問題