问题：
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);
});
});
共有2个答案
欧阳杰
发现了问题。
columns : [
{
id : 'name',
列ID必须不同，即使它们位于不同的网格中
皇甫学海
如果您在同一个页面上有两个可编辑的网格，则可以使用两个不同的Ext.grid.plugin.RowEdting类实例/对象来不同地标识两个网格id列。很多时候，拥有相同的id是很重要的。
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');
plugins : [rowEditing]
plugins : [rowEditing2]
类似资料：
-
问题内容： 我有一个动态网页，该网页应处理两种形式：登录表单和注册表单。我正在使用WTForms处理这两种形式，但是由于将两种形式都呈现到同一页面上，因此使它无法正常工作。 以下是我的网页登录表单的代码： PYTHON: HTML: 以下是我的网页注册表格的代码： PYTHON: HTML: 继续加载网页时出现以下错误： 据我了解，表单之间存在冲突，因为根据追溯： 返回以下错误： 当脚本看到： 但
-
我用缩略图创建了一个小图像库。每次我将鼠标悬停在给定的颜色上，主窗口中的图像就会变成具有这种颜色的图像（实际上，我希望彩色图像被替换为我放在那里的图像的不同颜色变化）。 我想做的是在我的页面上放不止一个这样的图库。问题是，如果我添加另一个库，所有内容都会重复。我希望避免为每个库创建css和jquery代码。有什么办法可以做到这一点吗？ 此外，最初我希望大图像仅在单击彩色缩略图时显示，而不是悬停在上
-
问题内容： 我想将注册和登录表格都放在同一页面上。 它们都以： 所以，我需要这样的东西： 还有如何在第二个表格繁忙时防止执行第一个表格，反之亦然（用户单击两者） 我的想法是在启动流程时（例如，在流程结束时）创建一个简单变量，因此： 可能有更好的方法。 问题答案： 您可以通过两种不同的动作制作两种形式 还是这样做 然后，您的PHP文件将用作一个switch（$ _ POST [‘action’]）…
-
使用两个具有相同标题和/或元描述的页面在谷歌排名上是否有任何惩罚？如果是，罚则是什么？ 两个页面位于同一域上。一个页面URL是，另一个页面URL是。两个页面的H1头是相同的，并且都具有相同的元描述。
-
嗨，我试图使用chartjs可以在这个链接中找到www.chartjs.org 我试图用样本代码在同一页上画两个图表 我用两个不同的ID创建了两个不同的div 就像这样 那么在包括这一行之后： 我以这种方式创建了第一个图表： 第二张图表是这样的： 两个图表使用的数据与样本相同，所以没有什么变化，但如果我只画一个图表本身，它的工作原理很好，如果我把两个图表在同一时间，我只得到饼图 你能告诉我问题在哪
-
我需要在一个页面上创建多个二维码。 我使用的图书馆 https://larsjung.de/jquery-qrcode/ 我用这样一个代码打印了多个，但二维码创造的价值是“无文本”。 它生成一个条形码与下面的代码，但不幸的是，我有麻烦创建多个条形码。 null null