求助:有人对extjs中fieldset比较熟的么?

yale13 2010-09-19 10:26:01
最近需要实现一个效果,有比较多条目(大概超过15个)实现效果为:每5个一组,初始只显示三个大的组项目,然后点击展开,再点击隐藏。查阅相关资料,需要使用fieldset可以实现这个效果,谁有比较好的例子给参考一下啊?
...全文
531 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
yale13 2010-09-27
  • 打赏
  • 举报
回复
插入图片效果吧!

另一张:
yale13 2010-09-25
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 flyerwing 的回复:]
是想列布局还是什么的.如果每个只显示一个那为什么不用TABPANEL了.
没搞懂了!
和HTML标记中的FIELDSET类似.
[/Quote]
搞列布局,因为我已经使用了两个formpanel了,这两个formpanel放在一个tabpanel里,你可以稍微看一下我上面的代码,而我在一个formpanel里竖着的列比较多,因此需要使用textfield归类隐藏一些列。
flyerwing 2010-09-21
  • 打赏
  • 举报
回复
是想列布局还是什么的.如果每个只显示一个那为什么不用TABPANEL了.
没搞懂了!
和HTML标记中的FIELDSET类似.
yale13 2010-09-20
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 ibm_hoojo 的回复:]
http://hi.baidu.com/play_niu/blog/item/9404f74cbef025ffd52afc60.html
[/Quote]

2#的,你这个网址里的东西没看懂,呃~我水平太低?我只想看看大家都是怎么用textfield的,并不怎么需要对它进行修改和扩展。不过还是谢谢你~
yale13 2010-09-20
  • 打赏
  • 举报
回复
但是显示的结果与http://dev.sencha.com/deploy/dev/examples/form/dynamic.html里的form2明显不同,只有前面的文字,没有后面的text框啊!
yale13 2010-09-20
  • 打赏
  • 举报
回复
// 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: '(888) 555-1212'
},{
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输出
lin364653705 2010-09-19
  • 打赏
  • 举报
回复
http://dev.sencha.com/deploy/dev/examples/form/dynamic.html
Form 2 - Adding fieldsets,会是你要的效果

52,792

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧