EXTJS 动态向容器中添加组件

Question

extjs循环创建组件add()方法动态添加组件

Answer 1

Notes : If the Container is already rendered when add is called, you may need to call doLayout to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once. For example:var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout

Answer 2

嗯，API我看过了，我也尝试了，没有结果才来求教。
var checkbox = individual.items[0];
var a = createRadioGroup(data.clazz[0].option[0]);
checkbox.add(a);checkbox.add(a);就已经有问题了，doLayout()未执行。

Answer 3

"checkbox.add(a);就已经有问题了，doLayout()未执行。"
说明你的a格式有问题，你自己调试看看，先用手动格式看行不，然后再读取数据.

Answer 4

还有你的individual.items[0]现在仅仅是个配置哟并没有渲染成组件，可能出在这里！

Answer 5

var radioGroup2 = {
xtype: 'fieldset',
title: data.clazz[0].option[1].title,
layout: 'form',
collapsible: true,
items: [{
xtype: 'component',
html: data.clazz[0].option[1].operation,
cls:'a'
},{
xtype: 'textfield',
name: 'text2',
fieldLabel: data.clazz[0].option[1].textarea
},{
xtype: 'radiogroup',
fieldLabel: data.clazz[0].option[0].radio[0].title,
cls: 'x-check-group-alt',
items: [
{boxLabel: data.clazz[0].option[1].radio[0].option[0], name: 'choose2', inputValue: "A"},
{boxLabel: data.clazz[0].option[1].radio[0].option[1], name: 'choose2', inputValue: "B"}, {boxLabel: data.clazz[0].option[1].radio[0].option[2], name: 'choose2', inputValue: "C"},
{boxLabel: data.clazz[0].option[1].radio[0].option[3], name: 'choose2', inputValue: "D"}
]
}]    
};
var individual = {
xtype: 'container',
layout: 'hbox',
margin: '0 0 10',
items: [{
xtype: 'fieldset',
flex: 1,
title: 'TITLE 2',
defaultType: 'checkbox',
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [
radioGroup2
]
}]
};面板代码就不附了，结果是：这是我手动配的。组件的格式应该是没问题的，

Answer 6

add组件要在父组件渲染完以后进行
var individual = {
    xtype: 'container',
    layout: 'hbox',
    margin: '0 0 10',
    items: [{
        xtype: 'fieldset',
        flex: 1,
        title: 'TITLE 2',
        defaultType: 'checkbox',
        layout: 'anchor',
        defaults: {
            anchor: '100%',
            hideEmptyLabel: false
        },
        listeners: {
             scope : this
             render: function(fieldset){
                   var a = createRadioGroup(data.clazz[0].option[0]);
                   fieldset.add(a);
                   fieldset.doLayout();
             }
        },
        items: [
            radioGroup2
        ]
    }]
};