在同一页面上ExtJs两个或多个网格

时间:2013-04-10 13:21:21

标签: extjs grid webpage extjs4.2

我是ExtJS的新手。

我在同一页面上有两个网格。第一个网格有3列。仅次于一次。问题是当渲染第二个时,它会覆盖第一个网格的属性。

例如,当我尝试编辑第一个网格中的行时,它会从第二个网格中获取行的宽度。

var $booleanArray = [
    ['denied', 'Denied'],
    ['allowed', 'Allowed']
];

var myPageSize = 10;

Ext.Loader.setConfig({ enabled: true });

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

Ext.onReady(function () {

    Ext.define('CharacteristicModel', {
        extend: 'Ext.data.Model',
        fields: [ {name: 'name'}, {name: 'value'}, {name: 'order'} ],
        validations: [
            {
                type : 'length',
                field: 'name',
                min  : 1
            }
        ]
    });

    var characteristicsStore = new Ext.data.Store({
        proxy    : {
            model   : 'CharacteristicModel',
            type    : 'rest',
            api     : {
                read   : admin_path + '/getCharacteristics/1/',
                create : admin_path + '/saveCharacteristics/1/',
                update : admin_path + '/saveCharacteristics/1/',
                destroy: admin_path + '/destroyCharacteristic/1/'
            },
            reader  : {
                type         : 'json',
                root         : 'data',
                totalProperty: 'total_count'
            },
            writer  : {
                type: 'json',
                root: 'data'
            },
            buffered: true
        },
        listeners: {
            read : function (response) {
            },
            load : function (store) {
            },
            write: function (store, operation) {
                store.load();
            }
        },
        pageSize : myPageSize,
        autoLoad : { start: 0, limit: myPageSize },
        autoSync : true
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

    var characteristicsGrid = new Ext.grid.GridPanel({
        id         : 'characteristicsGrid',
        renderTo   : 'characteristics_grid_div_1',
        store      : characteristicsStore,
        width      : 480,
        stateful   : true,
        stateId    : 'characteristicsGrid',
        title      : 'Grid "1"',
        iconCls    : 'icon-user',
        listeners  : {
            itemdblclick: function (dv, row, item, index, e) {
                dv.refresh();
                dv.getGridColumns()[0].setEditor({
                    disabled: true,
                    editable: false
                });

                if (row.data.id == 6 || row.data.id == 7) {
                    dv.getGridColumns()[1].setEditor({
                        xtype        : 'combo',
                        store        : new Ext.data.ArrayStore({
                            fields: ['abbr', 'action'],
                            data  : $booleanArray
                        }),
                        displayField : 'action',
                        valueField   : 'abbr',
                        mode         : 'local',
                        typeAhead    : false,
                        triggerAction: 'all',
                        lazyRender   : true,
                        emptyText    : 'Select action'
                    });
                }
                else if (row.data.id == 8 || row.data.id == 11) {
                    dv.getGridColumns()[1].setEditor({
                        disabled: true,
                        editable: false
                    });
                }
                else {
                    dv.getGridColumns()[1].setEditor({
                        xtype: 'textfield'
                    });
                }
            }
        },
        columns    : [
            {
                id       : 'name',
                text     : 'Account characteristic',
                sortable : false,
                width    : 340,
                fixed    : true,
                dataIndex: 'name'
            },
            {
                id       : 'value',
                text     : 'Value',
                sortable : false,
                dataIndex: 'value',
                width    : 70,
                fixed    : true,
                editor   : {
                    xtype: 'textfield'
                },
                renderer : function (value, field) {
                    if (field.record.data.id == 6 || field.record.data.id == 7) {

                        if ($booleanArray[0][0] != value) {
                            value = $booleanArray[1][1];
                        }
                        else {
                            value = $booleanArray[0][1];
                        }
                    }
                    return value;
                }
            },
            {
                id       : 'order',
                text     : 'Order',
                sortable : false,
                dataIndex: 'order',
                width    : 70,
                fixed    : true,
                editor   : {
                    xtype: 'textfield'
                },
                renderer : function (value, field) {
                    return value;
                }
            }
        ],
        bbar       : Ext.create('Ext.PagingToolbar', {
            store      : characteristicsStore,
            displayInfo: true,
            pageSize   : myPageSize,
            displayMsg : 'Show {0} - {1} из {2}',
            emptyMsg   : "0 rows"
        }),
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [
                    {
                        text   : 'Add',
                        iconCls: 'icon-add',
                        handler: function () {
                            var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
                            grid_colums[0].setEditor({
                                xtype        : 'combo',
                                store        : new Ext.data.ArrayStore({
                                    fields: ['id', 'name'],
                                    data  : $characteristics
                                }),
                                displayField : 'name',
                                valueField   : 'id',
                                mode         : 'local',
                                typeAhead    : false,
                                triggerAction: 'all',
                                lazyRender   : true,
                                emptyText    : 'Select action'
                            });
                            grid_colums[1].setEditor({
                                xtype: 'textfield'
                            });
                            // empty record
                            //characteristicsStore.autoSync = false;
                            characteristicsStore.insert(0, new CharacteristicModel());
                            rowEditing.startEdit(0, 0);
                            //characteristicsStore.autoSync = true;
                        }
                    },
                    '-',
                    {
                        itemId  : 'delete',
                        text    : 'Delete',
                        iconCls : 'icon-delete',
                        disabled: true,
                        handler : function () {
                            var selection = characteristicsGrid.getView().getSelectionModel().getSelection()[0];
                            if (selection) {
                                characteristicsStore.remove(selection);
                            }
                        }
                    }
                ]
            }
        ],
        plugins    : [rowEditing]
    });

    characteristicsGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
        characteristicsGrid.down('#delete').setDisabled(selections.length === 0);
    });

});


Ext.onReady(function () {

    Ext.define('AdvantagesModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name'}
        ]
    });

    // setup the state provider, all state information will be saved to a cookie
    //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    var advantagesStore = new Ext.data.Store({
        idProperty: 'AdvantagesModel',
        proxy    : {
            model   : 'AdvantagesModel',
            type    : 'rest',
            api     : {
                read   : admin_path + '/getAdvantages/1/',
                create : admin_path + '/saveAdvantages/1/',
                destroy: admin_path + '/destroyAdvantages/1/'
            },
            reader  : {
                type         : 'json',
                root         : 'data',
                totalProperty: 'totalCount'
            },
            writer  : {
                type: 'json',
                root: 'data'
            },
            buffered: true
        },
        listeners: {
            read : function (response) {
            },
            load : function (store) {
            },
            write: function (store, operation) {
                store.load();
            }
        },
        pageSize : myPageSize,
        autoLoad : { start: 0, limit: myPageSize },
        autoSync : true
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

    var advantagesGrid = new Ext.grid.GridPanel({
        id         : 'advantagesGrid',
        renderTo   : 'advantages_grid_div_1',
        store      : advantagesStore,
        width      : 482,
        height     : 355,
        stateful   : true,
        stateId    : 'advantagesGrid',
        title      : 'Grid 2',
        iconCls    : 'icon-user',
        listeners  : {
            beforeedit: function (dv, row, item) {
                //advantagesGrid.getView().refresh();
                if (row.record.raw)
                {
                    return false;
                }
            }
        },
        columns    : [
            {
                id       : 'name',
                text     : 'Advantages',
                sortable : false,
                dataIndex: 'name',
                width    : 480
            }
        ],
        bbar       : Ext.create('Ext.PagingToolbar', {
            store      : advantagesStore,
            displayInfo: true,
            pageSize   : myPageSize,
            displayMsg : 'Show {0} - {1} из {2}',
            emptyMsg   : "0 rows"
        }),
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [
                    {
                        text   : 'Add',
                        iconCls: 'icon-add',
                        handler: function () {
                            var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
                            grid_colums[0].setEditor({
                                xtype        : 'combo',
                                store        : new Ext.data.ArrayStore({
                                    fields: ['id', 'name'],
                                    data  : $advantages
                                }),
                                displayField : 'name',
                                valueField   : 'id',
                                mode         : 'local',
                                typeAhead    : false,
                                triggerAction: 'all',
                                lazyRender   : true,
                                emptyText    : 'Select action'
                            });
                            // empty record
                            advantagesStore.autoSync = false;
                            advantagesStore.insert(0, new AdvantagesModel());
                            rowEditing.startEdit(0, 0);
                            advantagesStore.autoSync = true;
                        }
                    },
                    '-',
                    {
                        itemId  : 'delete',
                        text    : 'Delete',
                        iconCls : 'icon-delete',
                        disabled: true,
                        handler : function () {
                            var selection = advantagesGrid.getView().getSelectionModel().getSelection()[0];
                            if (selection) {
                                advantagesStore.remove(selection);
                            }
                        }
                    }
                ]
            }
        ],
        plugins    : [rowEditing]
    });

    advantagesGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
        advantagesGrid.down('#delete').setDisabled(selections.length === 0);
    });

});

2 个答案:

答案 0 :(得分:3)

如果在同一页面上有两个可编辑的网格,则可以使用Ext.grid.plugin.RowEditing类的两个不同实例/对象来替换两个不同的网格id列。很多时候,拥有相同的身份很重要。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');

plugins    : [rowEditing]

plugins    : [rowEditing2]

答案 1 :(得分:0)

发现了问题。

columns    : [
        {
            id       : 'name',

列ID必须不同,即使它们位于不同的网格中