求助：有人对extjs中fieldset比较熟的么？

[yale13]

最近需要实现一个效果，有比较多条目（大概超过15个）实现效果为：每5个一组，初始只显示三个大的组项目，然后点击展开，再点击隐藏。查阅相关资料，需要使用fieldset可以实现这个效果，谁有比较好的例子给参考一下啊？

[lin364653705]

http://dev.sencha.com/deploy/dev/examples/form/dynamic.html
Form 2 - Adding fieldsets，会是你要的效果

[hoojo]

http://hi.baidu.com/play_niu/blog/item/9404f74cbef025ffd52afc60.html

[yale13]

// form start
    var form = new Ext.form.FormPanel({
        title: '收文编辑',
        frame: true,
        width: 300,
        autoHeight: true,
        labelAlign: 'right',
        labelWidth: 60,
        defaultType: 'textfield',
        
        defaults: {
            width: 200
        },
        items: [{
            xtype: 'hidden',
            name: 'id'
        },
        
        {
            xtype:'fieldset',
            checkboxToggle:true,
            title: 'User Information',
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            collapsed: true,
            items :[{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }
            ]
        },{
            xtype:'fieldset',
            title: 'Phone Number',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            items :[{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '[phone]'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }
            ]
        }
        //,
        /*
        new Ext.form.FieldSet({
        title:'产品',
        checkboxToggle:true,
        checkboxName:'chanpin',
        labelSeparator:':',
        autoHeight: true,
        defaults: {autoWidth:true},
        /*overflow:'auto',
        autoScroll: true,*/
        /*items:[
        itlwdw,itlwbh,it3,it4,itbt,itfs,itys,itblqk,itbz
        ]
        })
        */
        ],
        //}],
        buttons: [bt1,bt2,bt3,bt4] 
    });
    // form end

上面是form的定义，

//tabpanel start
    var tabPanel = new Ext.TabPanel({
			height : 150,
			width : 300,
            region: 'west',
			activeTab : 0,//默认激活第一个tab页
			animScroll : true,//使用动画滚动效果
			enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
//			applyTo : 'main',
			resizeTabs : true,
			tabMargin : 50,
			tabWidth : 100,
			items :[
			form,
			form2
			]
	});
    //tabpanel end

这是tabpanel的定义，

// layout start
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            contentEl: 'head'
        }, grid, tabPanel,  {
            region: 'south',
            contentEl: 'foot'
        }]
    });
    // layout end

viewpoint输出

[yale13]

但是显示的结果与http://dev.sencha.com/deploy/dev/examples/form/dynamic.html里的form2明显不同，只有前面的文字，没有后面的text框啊！

[yale13]

[Quote=引用 2 楼 ibm_hoojo 的回复:]
http://hi.baidu.com/play_niu/blog/item/9404f74cbef025ffd52afc60.html
[/Quote]

2#的，你这个网址里的东西没看懂，呃~我水平太低？我只想看看大家都是怎么用textfield的，并不怎么需要对它进行修改和扩展。不过还是谢谢你~

[flyerwing]

是想列布局还是什么的.如果每个只显示一个那为什么不用TABPANEL了.
没搞懂了!
和HTML标记中的FIELDSET类似.

[yale13]

[Quote=引用 6 楼 flyerwing 的回复:]
是想列布局还是什么的.如果每个只显示一个那为什么不用TABPANEL了.
没搞懂了!
和HTML标记中的FIELDSET类似.
[/Quote]
搞列布局，因为我已经使用了两个formpanel了，这两个formpanel放在一个tabpanel里，你可以稍微看一下我上面的代码，而我在一个formpanel里竖着的列比较多，因此需要使用textfield归类隐藏一些列。

[yale13]

插入图片效果吧！

另一张：