+ -
当前位置:首页 → 问答吧 → extjs中怎样将文本框和复选框组合成一个组件呢?

extjs中怎样将文本框和复选框组合成一个组件呢?

时间:2011-08-31

来源:互联网

extjs中怎样将文本框和复选框组合成一个组件呢?
我想把文本框和复选框组合成一个组件然后动态生成这个组件。
前台显示是根据数据库中的数据个数来动态的生成这个组件的个数!也就是说后台返回了多少个值,就显示多少个这样的组合组件。

我现在的代码:
JScript code

for (var i = 0; i < store_line.getCount(); i++) {
        var label=store_line.getAt(i).get('display');
        var name = store_line.getAt(i).get("value");
        ip1 = new Ext.form.TextField({
               id:name,                  
               width:130,
               fieldLabel : "<span style='margin-left:10px'>ip</span>",   
            name:name
        })
        itf=new Ext.form.Checkbox({
            id:name,
            name:name,
            fieldLabel :label
        })
        Ext.getCmp('ip_addr').items.add(itf);
        other.doLayout(true);
        Ext.getCmp('ip_addr').items.add(ip1);
        other.doLayout(true);
    }


现在这样的话页面布局就将复选框和文本框分开了(复选框一行,文本框又是另一行)
我想要的效果是,将复选框和文本框在一行显示。所以就想讲复选框和文本框组合成一个组件,然后add到other中(other是一个filedset组件)
求高手看看!怎么解决!

作者: adtadtadt   发布时间: 2011-08-31

Ext.getCmp('ip_addr')
这个是什么啊。不用组合呀。。它可以在一行的。

作者: lsw645645645   发布时间: 2011-08-31

你可以把这2个组件放到panel里面,然后add到你定义的filedset里面去就行了!
JScript code

test = new Ext.Panel({
            autoHeight:true,
               labelWidth:50,
               items:[{
                 layout:'column',
                 items:[{
                        columnWidth:.5,
                        layout: 'column',
                        items: [
                            ip1 = new Ext.form.TextField({
               id:name,                  
               width:130,
               fieldLabel : "<span style='margin-left:10px'>ip</span>",   
            name:name
        })
                        ]
                },{
                        columnWidth:.5,
                        layout: 'form',
                        items: [
                            itf=new Ext.form.Checkbox({
            id:name,
            name:name,
            fieldLabel :label
        })
                        ]
                }]
           }]
        });
        Ext.getCmp('ip_addr').items.add(test);
        other.doLayout(true);


作者: USERNAME_FB   发布时间: 2011-08-31

JScript code
//封装一个panel column布局
var myPanel = function(name, label)
{
    var checkbox = new Ext.form.Checkbox({
        id : name + "_chk",
        name : name,
        labelWidth : 200,
        fieldLabel : label
    })
    var textfield = new Ext.form.TextField({
        id : name + "_text",
        width : 300,
        fieldLabel : "<span style='margin-left:10px'>ip</span>",
        name : name
    })

    var formPanel = new Ext.Panel({
        labelWidth : 30,
        items : [{
            layout : 'column',
            items : [{
                columnWidth : .4,
                layout : 'form',
                items : [textfield]
            }, {
                columnWidth : .5,
                layout : 'form',
                items : [checkbox]
            }]
        }]
    });
    return formPanel;
}
var fieldset = Ext.getCmp('你的fieldset');
for (var i = 0; i < store_line.getCount(); i++)
{
    var label = store_line.getAt(i).get('display');
    var name = store_line.getAt(i).get("value");
    fieldset.add(myPanel(name, label))
}
fieldset.doLayout(); //循环完之后再去doLayout

作者: fanchuanzhidu   发布时间: 2011-08-31

另外:楼主的代码中有一个严重的问题 就是你的checkbox和textfield的id参数都是一样的 Ext中不允许id重复

作者: fanchuanzhidu   发布时间: 2011-08-31

不用组合,完全可以在一行的,items{{},{}}这样

作者: LeeHomWong   发布时间: 2011-08-31