java中如何合并两个网格,在同一页面上ExtJs两个或多个网格

我是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);

});

});