1

私は extJS を初めて使用し、グリッド パネルに 8 つの [乱数] レコードを表示しようとしています。また、ページング ツールバーを使用してページごとに 4 つのレコードを表示していますが、1 ページに 8 つのレコードしか表示されません。

var myData = [
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
    ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
    ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

var store = new Ext.data.ArrayStore({
    totalProperty: 8,
    autoLoad: {
        params: {
            start: 0,
            limit: 4
        }
    },
    fields: [{
        name: 'company'
    }, {
        name: 'price',
        type: 'float'
    }, {
        name: 'change',
        type: 'float'
    }, {
        name: 'pctChange',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'n/j h:ia'
    }]
});

store.loadData(myData);

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [{
        id: 'company',
        header: "Company",
        width: 160,
        sortable: true,
        dataIndex: 'company'
    }, {
        header: "Price",
        width: 75,
        sortable: true,
        renderer: 'usMoney',
        dataIndex: 'price'
    }, {
        header: "Change",
        width: 75,
        sortable: true,
        renderer: change,
        dataIndex: 'change'
    }, {
        header: "% Change",
        width: 75,
        sortable: true,
        renderer: pctChange,
        dataIndex: 'pctChange'
    }, {
        header: "Last Updated",
        width: 85,
        sortable: true,
        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        dataIndex: 'lastChange'
    }],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 350,
    width: 600,
    title: 'Array Grid',

    bbar: new Ext.PagingToolbar({
        store: store,
        pageSize: 4,
        displayInfo: true
    }),
    viewConfig: {
        forceFit: true
    }
});

この問題を解決するにはどうすればよいですか？

4

2 に答える 2

1

Ext.ux.data.PagingStoreクライアント側のページングにを使用できます。
次のようなことを試してください： 

var store = new Ext.ux.data.PagingStore({
    reader: new Ext.data.ArrayReader({
        fields: [
                 {name: 'company'},
                 {name: 'price', type: 'float'},
                 {name: 'change', type: 'float'},
                 {name: 'pctChange', type: 'float'},
                 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                ],
    }),
    totalProperty : 8,
    autoLoad:{
        params:{start:0, limit:4}
    },
    data: myData
});

私はそれをテストしていないので、これを少し調整する必要があるかもしれません. サーバーからレコードをフェッチ
する作業をしています。JsonReaderお役に立てれば。

于 2011-06-09T10:09:14.897 に答える
0

store.loadData() 呼び出しを使用する代わりに、ストアで .load() 関数を呼び出し、最大ページ サイズを指定する引数を持つオブジェクトを渡す必要があります。

このページの例をチェックしてくださいhttp://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.PagingToolbar

編集：別のオプションは、次のことを行うことです。.loadData() を呼び出し、グリッドをインスタンス化した後、呼び出すことができます

grid.store.load({params:{start: 0, limit: 4}});
于 2011-06-08T20:45:46.547 に答える