extjs 动态地将项目添加到表单面板中

Posted

技术标签:

【中文标题】extjs 动态地将项目添加到表单面板中【英文标题】:extjs add items to a formpanel in a row dynamically 【发布时间】:2012-08-22 10:05:01 【问题描述】:

使用 ExtJS 3.4 - 我有一个表单面板,它连续排列三个按钮。我相信这样做的正确方法是嵌套项目块,代码显示了我在做什么。

var myPanel = new Ext.form.FormPanel(
    id:'myPanel',
    height:300,
    width: 800,
    items:[
        layout : 'column' ,border:false,buttonAlign : 'left', bodyStyle : 'padding:15px 20px 0',
        items:[
                      layout:'column' , border:false,  
                      items:[saveSelectedButton, deleteSelectedButton, cancelButton ]
               ]
      ]


);

我真正需要做的是动态添加按钮,以便项目块首先为空items:[],然后我调用

myPanel.add(saveSelectedButton, deleteSelectedButton, cancelButton);

但是按钮是在一列中呈现的,有什么建议吗?

【问题讨论】:

【参考方案1】:

使用buttons 而不是items 是更优选的方式。

var myPanel = new Ext.form.FormPanel(
// ... 
    buttons:[saveSelectedButton, deleteSelectedButton, cancelButton]  
);

要动态添加它们,您应该使用addButton 方法。例如

var form = new Ext.form.FormPanel(
        title: 'Test',
        el: 'test',
        url: '',
        method: '',
        items: [],
        buttons: []
    );
    form.addButton(
        text: 'Test Button',
        id: 'test-button',
        type: 'submit'
    );
    form.render();

【讨论】:

以上是关于extjs 动态地将项目添加到表单面板中的主要内容,如果未能解决你的问题,请参考以下文章

手动/动态地将数据加载到树形面板中?

需要 ExtJs 边框布局项目选择帮助。

为 Ext JS 3.4 添加动态列

在 asp .NET MVC 中提交表单之前动态地将项目添加到列表中

将文本字段动态添加到 extjs 中的面板

ExtJS:向网格中添加的列插入值