extjs4如何多次显示字段 [英] extjs4 how to display field multiple times
问题描述
我有一个extjs表单面板。根据在组合框中选择的值，我需要多次显示字段集。也就是说，如果所选值为1，则显示一次字段集，如果选择值为2，则显示一次字段集。如果选择的值为2，则显示一次。
I have an extjs form panel. Based on the value selected in the combo box, I need to display a fieldset multiple times. That is,display the field set once if value chosen is 1, twice if value chosen is 2.
我面临的问题是，字段集只显示一次。因为，我改变了字段集的标题，我可以更清楚地说明正在显示的字段集是在for循环的最后一次迭代中的字段集。
The problem that I am facing is that, the field set is being displayed only once. Since, I am changing the title of the fieldset, I can tell more clearly that the fieldset being displayed is the one in the last iteration of the for loop.
但是，我可以在js控制台中查看for循环的所有迭代的日志消息，这意味着循环正在正确执行。
However,I can see the log messages in the js console for all the iterations of the for loop which means that the loop is being executed properly.
这是我的代码：
Ext.define('ELM.view.cl.Edit', {
extend : 'Ext.form.Panel',
alias : 'widget.cform',
addMode : false,
layout : 'fit',
autoShow : true,
initComponent : function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems : function() {
return [ {
xtype : 'form',
id : 'details',
items : [
{
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Details',
items : [
{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [['1','1'],['2','2'],['3','3']]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var formpanel = Ext.widget('cform');
var sd = this.up('form').getComponent(
'scriptdetails');
for ( var i=1; i<=combo.getValue();i++){
console.log(i);
var title="Script details "+i;
sd.setTitle(title);
sd.show();
sd.hidden = false;
console.log(sd);
}
}
}
}, ]
}, {
xtype : 'fieldset',
id : 'scriptdetails',
columnWidth : '0.5',
hidden : true,
title : 'Script Details',
items : [ {
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
} ]
}
]
} ];
}
});
UPDATE：这是工作代码：
{
fieldLabel : 'Name :',
xtype : 'textfield',
name : 'name'
},{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [ [ '1', '1' ], [ '2', '2' ],[ '3', '3' ] ]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
var scriptField = {
xtype : 'fieldset',
items : [
{
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
},
{
xtype : 'textfield',
fieldLabel : 'Script Parameters',
name : 'scriptParameters'
} ]
};
dynamicPanel.removeAll(true);
for ( var i = 0; i < combo.getValue(); i++) {
var index = dynamicPanel.items.length;
var j = i + 1;
scriptField.title = "Script Details "+ j;
dynamicPanel.insert(index,scriptField);
dynamicPanel.doLayout();
}
}
}
>
推荐答案
您在字段集中使用id：'scriptdetails'。在网页中，每个组件或元素都应具有唯一的ID。如果有具有相同id的元素，则在呈现元素时将存在问题，如单个元素被呈现具有错误或元素可能不被呈现。
You are using id:'scriptdetails' in fieldset. In web pages each component or element should have an unique id. If there are elements with same id then there will be problems in rendering the elements like single element is rendered with errors or element may not be rendered.
在您的情况下，由于您必须重复字段集，请不要使用固定ID。使用从服务器随机生成的ID或使用ExtJS提供的'itemId'。
In your case as you have to repeat the field set, don't not use fixed id. Use a random generated id from server or use 'itemId' which ExtJS provides.
更新：
工作小提琴是这里
Ext.onReady(function() {
var store = new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [
[1, '1'],
[2, '2'],
[3, '3'],
]
});
var scriptField = {
xtype: 'fieldset',
columnWidth: '0.5',
title: 'Script Details',
items: [{
xtype: 'textfield',
fieldLabel: 'Script Name',
hiddenName: 'scriptName'
}]
};
var container = new Ext.Panel({
layout: 'hbox',
height: '700px',
items: [{
xtype: 'panel',
id: 'parentContainer',
height: '700px',
layout: 'form',
items: [{
xtype: 'combo',
editable: false,
triggerAction: 'all',
mode: 'local',
store: store,
valueField: 'myId',
displayField: 'displayText',
fieldLabel: 'Show Number of Items',
listeners: {
select: function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
dynamicPanel.removeAll(true);
for (var i = 0; i < combo.getValue(); i++) {
scriptField.title = "Script Details " + i;
dynamicPanel.add(scriptField);
dynamicPanel.doLayout();
dynamicPanel.ownerCt.doLayout();
dynamicPanel.ownerCt.ownerCt.doLayout();
}
}
}
}, {
xtype: 'panel',
id: 'dynamicPanel',
items: []
}]
}]
});
container.render(Ext.getBody());
});
这篇关于extjs4如何多次显示字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
