ExtJS 从兄弟元素中获取值
ExtJS get value from sibling element
我正在使用 extjs 3.4
我已将面板动态添加到 parent 面板。
我想在单击时捕获迭代器 (i) 的值。
此迭代器的值保存在隐藏元素中:
xtype: 'hidden',
cls: 'hidden-ID',
value: i
所以基本上在点击时我应该能够找到这个兄弟姐妹(也许通过 class 名称或类型?)。
但我真的不知道如何 - 我已经尝试找到 parent,但是从 parent 我找不到 children.
例子是here
代码:
Ext.onReady(function () {
var eleCatDisplay2 = new Ext.Panel({
renderTo: Ext.getBody(),
height: 350
});
for (i = 0; i < 10; i++) {
eleCatDisplay2.add(new Ext.Panel({
layout: 'hbox',
border: false,
style: {
marginTop: '10px'
},
items: [{
xtype: 'displayfield',
flex: 1,
value: 'rowNum__' + i.toString()
}, {
xtype: 'hidden',
cls: 'hidden-ID',
value: i
}, {
xtype: 'panel',
flex: 0.3,
border: false,
html: '<div>click to send</div>',
listeners: {
'render': function (panel) {
panel.body.on('click', function () {
//here I would like to catch value of i
alert('test');
});
}
}
}]
}));
}
eleCatDisplay2.doLayout();
});
解决方案(在显示字段中我添加了 cls: 'display-cat-name'):
var cNM = Ext.getCmp(this.up('.hbox-parent').select('.display-cat-name').elements[0].id).value;
var catId = this.up('.hbox-parent').select('.hidden-ID').elements[0].value;
您还可以在面板的某些自定义 属性 中存储值:
Ext.onReady(function () {
var eleCatDisplay2 = new Ext.Panel({
renderTo: Ext.getBody(),
height: 350
});
for (i = 0; i < 10; i++) {
eleCatDisplay2.add(new Ext.Panel({
layout: 'hbox',
border: false,
style: {
marginTop: '10px'
},
items: [{
xtype: 'displayfield',
flex: 1,
value: 'rowNum__' + i
}, {
xtype: 'hidden',
cls: 'hidden-ID',
value: i
}, {
xtype: 'panel',
flex: 0.3,
border: false,
html: '<div>click to send</div>',
somePropertyName: i,
listeners: {
'render': function (panel) {
panel.body.on('click', function () {
console.log(panel.somePropertyName);
});
}
}
}]
}));
}
eleCatDisplay2.doLayout();
});
我正在使用 extjs 3.4
我已将面板动态添加到 parent 面板。 我想在单击时捕获迭代器 (i) 的值。 此迭代器的值保存在隐藏元素中:
xtype: 'hidden',
cls: 'hidden-ID',
value: i
所以基本上在点击时我应该能够找到这个兄弟姐妹(也许通过 class 名称或类型?)。
但我真的不知道如何 - 我已经尝试找到 parent,但是从 parent 我找不到 children.
例子是here
代码:
Ext.onReady(function () {
var eleCatDisplay2 = new Ext.Panel({
renderTo: Ext.getBody(),
height: 350
});
for (i = 0; i < 10; i++) {
eleCatDisplay2.add(new Ext.Panel({
layout: 'hbox',
border: false,
style: {
marginTop: '10px'
},
items: [{
xtype: 'displayfield',
flex: 1,
value: 'rowNum__' + i.toString()
}, {
xtype: 'hidden',
cls: 'hidden-ID',
value: i
}, {
xtype: 'panel',
flex: 0.3,
border: false,
html: '<div>click to send</div>',
listeners: {
'render': function (panel) {
panel.body.on('click', function () {
//here I would like to catch value of i
alert('test');
});
}
}
}]
}));
}
eleCatDisplay2.doLayout();
});
解决方案(在显示字段中我添加了 cls: 'display-cat-name'):
var cNM = Ext.getCmp(this.up('.hbox-parent').select('.display-cat-name').elements[0].id).value;
var catId = this.up('.hbox-parent').select('.hidden-ID').elements[0].value;
您还可以在面板的某些自定义 属性 中存储值:
Ext.onReady(function () {
var eleCatDisplay2 = new Ext.Panel({
renderTo: Ext.getBody(),
height: 350
});
for (i = 0; i < 10; i++) {
eleCatDisplay2.add(new Ext.Panel({
layout: 'hbox',
border: false,
style: {
marginTop: '10px'
},
items: [{
xtype: 'displayfield',
flex: 1,
value: 'rowNum__' + i
}, {
xtype: 'hidden',
cls: 'hidden-ID',
value: i
}, {
xtype: 'panel',
flex: 0.3,
border: false,
html: '<div>click to send</div>',
somePropertyName: i,
listeners: {
'render': function (panel) {
panel.body.on('click', function () {
console.log(panel.somePropertyName);
});
}
}
}]
}));
}
eleCatDisplay2.doLayout();
});