extjs4如何多次显示字段 [英] extjs4 how to display field multiple times
本文介绍了extjs4如何多次显示字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我所面临的问题是，字段集正在只显示一次。由于我正在更改字段集的标题，所以我可以更清楚地说明正在显示的字段集是for循环的最后一次迭代。
但是，我可以在js控制台中看到for循环的所有迭代的日志消息，这意味着循环正确执行。
这是我的代码：
Ext.define（'ELM .view.cl.Edit'，{
extends：'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脚本需要'，
xtype：'combo'，
name：'noOfS criptsRequired'，
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 =脚本细节+ 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'
}]
}
]
}];
}
}）;
更新：以下是工作代码：
{
fieldLabel：'Name：'，
xtype：'textfield'，
name：'name'
}，{
fieldLabel：需要脚本数，
xtype：'combo'，
名称：'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 =脚本详细信息+ j;
dynamicPanel.insert（index，scriptField）;
dynamicPanel.doLayout（）;
}
}
}
提前感谢
解决方案
在fieldset中使用id：'scriptdetails'。在网页中，每个组件或元素应具有唯一的ID。如果有与id相同的元素，那么渲染像单元素这样的元素会呈现出错误或元素可能不会呈现的问题。
在您的情况下，您必须重复该字段集，请勿使用固定的ID。使用服务器的随机生成ID，或使用ExtJS提供的'itemId'。
更新：
工作小提琴是这里
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：'脚本细节'，
项目： [{
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：' comb'，
可编辑：false，
triggerAction：'all'，
mode：'local'，
store：store，
valueField：'myId'，
displayField：'displayText'，
fieldLabel：'显示项目数量'，
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（））;
}）;
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.
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.
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.
Here is my code:
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: Here is the working code:
{
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();
}
}
}
Thanks in advance
解决方案
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.
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.
Update: Working fiddle is here
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屋！
查看全文
