-
等级
本版专家分：12结帖率 0% -
最近需要实现一个效果，有比较多条目（大概超过15个）实现效果为：每5个一组，初始只显示三个大的组项目，然后点击展开，再点击隐藏。查阅相关资料，需要使用fieldset可以实现这个效果，谁有比较好的例子给参考一下啊？展开阅读全文
-
等级
本版专家分：3466
-
版主等级
本版专家分：45836勋章
-
-
红花
2010年9月 Web 开发大版内专家分月排行榜第一
2010年8月 Web 开发大版内专家分月排行榜第一
2010年7月 Web 开发大版内专家分月排行榜第一
-
- 蓝花 2010年10月 Web 开发大版内专家分月排行榜第三
-
-
等级
本版专家分：12
-
// 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输出
-
等级
本版专家分：12
-
但是显示的结果与http://dev.sencha.com/deploy/dev/examples/form/dynamic.html里的form2明显不同，只有前面的文字，没有后面的text框啊！
-
等级
本版专家分：12
-
2#的，你这个网址里的东西没看懂，呃~我水平太低？我只想看看大家都是怎么用textfield的，并不怎么需要对它进行修改和扩展。不过还是谢谢你~
-
等级
本版专家分：3288
-
是想列布局还是什么的.如果每个只显示一个那为什么不用TABPANEL了.
没搞懂了!
和HTML标记中的FIELDSET类似.
-
等级
本版专家分：12
-
搞列布局，因为我已经使用了两个formpanel了，这两个formpanel放在一个tabpanel里，你可以稍微看一下我上面的代码，而我在一个formpanel里竖着的列比较多，因此需要使用textfield归类隐藏一些列。
- Extjs中FieldSet的收缩和展开实例
Extjs中FieldSet的收缩和展开实例: FieldSet表单控件属于Ext.form.FieldSet的类，继承自：Ext.Panel，表示对某一组字段的标准容器，其中最主要的一个功能就是收缩和展开收缩与展开demo： items: [ id:'check_...
- extjs-布局 （在column布局中使用fieldset 和 在fieldset中使用column布局）
在标准的html中，需要把输入项都放到fieldset中，一次来显示分组结构。虽然EXT中的表单已经很漂亮了，但我么依然可以用fieldset来进行内部分组。 为了突出显示效果，这里我们可以将column和fieldset（fieldset...
- [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
可以清晰的看到，form.Panel... 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的 Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域.
- ExtJs FieldSet
var type = [ [ '查看本月', 1 ], [ '本月以前', 2 ] ]; var storeType = new Ext.data.SimpleStore({ fields : [ 'text', 'value' ], data : type }); var comboType = new Ext.form.ComboBox({ ...
- extjs fieldset 和 radio
Extjs3.3.1 一个简单的布局,和样式 最后完成效果: 具体JS代码: //初始化单选按钮组 var districtTypeRadioGroup= {xtype: 'fieldset', height:23, fieldLabel: '地域统计类型', width:...
- Extjs4中的Form之fieldset的使用
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create("Ext.form.Panel... title:'本地FieldSet实例', renderTo:'formDemo', bodyPadding:'5 5 5 5', height:300, width:270, frame:true, items:
- Ext JS 学习(5) Ext.FormPanel 组件的使用第二式(fieldset的使用， ExtJS表单验证模式)
上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去，说全一点，说深一点。3.可选的fieldset实例 其实就是带个chechbox，有点像论坛注册时有一部分是选填信息的那种效果，主要...
- EXTJS4.2的gird中如何设置表头加粗特定行或者列加粗？
EXTJS的gird中如何设置表头加粗特定行或者列加粗？如下图我想让蓝色笔圈住的部分加粗突出显示
- Extjs中对ajax中request方法的重写,对请求的过滤
涛哥实力派，是一匹千里马，可惜了水货上司。
- 关于Extjs的问题， 面板的样式在哪个配置文件中
在Ext中，创建面板，不设置大小，即有默认的，那个配置文件是叫什么
- 关于extjs中的cls ≠ class
今天在做一个登录页面的时候，想给两个cls: "text_field" 的输入框设一个padding值来着的，结果发现并没有卵用。后来通过查看页面元素，发现这两只输入框的class属性并不是我设置的text_field，而是class=...
- 为ext.formpanel中的fieldset动态添加元素实例
Ext.onReady(function() { function getFormInput(s) { var count = 1; var sss = ""; for (var i = 0; i sss = count++; var mm = new Ext.form.Ch
- ExtJS中设置下拉列表不可编辑
ExtJS中设置下拉列表框不可编辑 ExtJS这个框架，并没有学习和用过，只知道是一个流行的前段框架，和Easy UI,BUI,DWZ等这些框架都是差不多的，只不过比他们更加强大而已，之所以写这个，我觉得还是很有帮助的。 ...
- ExtJs中table布局如何设置items之间的间距
注意：默认情况下，table布局中的子控件 text-align 为 center ，此处笔者不需要居中，所以可在此处重写 text-align 属性值。 效果图： 上图是默认的table布局，修改之后我们要的是下图所示： ...
- [ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
在注册页面获取填写信息的界面，我们都能...在Ext中，我们可以通过fieldLabel来创建一个标签，但是没有选项明确指出有必填选项的配置，刚才看了下官方的例子，发现有个beforeLabelTpl配置可以用来设置必填选项的*标志。
- ExtJS中运用HTML5 Canvas简单例子
在ExtJS的Panel组件上使用HTML5的Canvas对象画图 的简单例子，效果如下： ...与JavaScript代码copy到各自的文件中，在同一目录下使用Google Chrome浏览器 或者IE9.0打开html文件即可看到效果！ HTML的代码如下
- Extjs中Ext.form.VTypes日期大小比较的实例
Ext.apply(Ext.form.VTypes, { sField : function(val, field) { var f = field.getValue(); var sf = field.tScope[field.smallerField].getValue(); if (!Ext.isEmpty(f) && !Ext.isEmpty(sf) && Number(sf
- fieldset会有一个外白色边框 如何去掉
/*去掉fieldset边框*/ fieldset{ border: 0; } 这样就好了
- 适合extjs的工作流有哪些，签核中可以随便邀请参与人
适合extjs的工作流有哪些，要求签核中可以随时邀请参与人更改流程
- ExtJs布局中，控件如何水平居中？
如此即可，有图有代码有j8:var formGridHead = Ext.create('Ext.form.Panel', { id: 'MyGridHead', region: 'north', bodyPadding: 10, bodyStyle: 'background:#fff', split: false,
- Ext.form.FieldSet的用法
Ext.form.FieldSet的用法 更多2013/10/10 来源：Extjs学习浏览量：8026 学习标签： Extjs FieldSet 本文导读：Ext.form.FieldSet继承自于Ext.Panel，Ext.form.FieldSet 扩展Ext.container.Container...
- extjs中Toolbar的items元素，可以设置宽度么
titem是从strtus的action中返回的out参数，out参数中包括text，id,等等， 形成的是每个父菜单，请问有没有参数可以把该菜单宽度变大，谢谢！！ 我试过width，可是无效。ps:Toolbar最后是放到panel的...
- extjs中文乱码
在web的开发中经常出现乱码的问题。问题的解决需要首先解决的是具体在server发送数据的乱码 还是在client在显示的乱码 。其次是根据不同的情况采取不同的措施。 1.确定乱码的来源 2.解决...
- ExtJS 4中自定义Grid列标题的对齐方式
从ExtJS 2.0到目前的4.0，Grid的列标题对齐方式都是和数据的对齐方式一致的，这不太符合中国人的习惯。解决办法是，自己重写一下Ext.grid.column.Column对象中渲染列标题的对齐方式的代码。代码只有一句，在...
- ExtJS 4中动态加载的路径设置
在此首先感谢CSDN的文顺网友，是他提醒了我需要写这文的。 在Loader对象中，动态加载是使用getPath方法获取下载路径的，其代码如下： 1 getPath: function(className) { 2 var path = '', 3 paths =
- extjs中的事件监听方法
事件监听方法： （1） 这个方法主要给dom对象来监听事件 Ext.get(document).on('事件',function(){ 处理方法}); （2）写在容器里面 如panel ...（3）对定义的js类进行事件监听 var eastpanel=new Ext.
- EXTJS 比较日期大小
04.form Ext.onReady(function () { var form = new Ext.form.FormPanel({ defaultType: 'datefield',
- ExtJS中editable、readOnly、disabled区别，jQuery与ExtJS区别
ExtJS中editable、readOnly、disabled区别 1）editable：设置false，阻止直接在表单项的文本框中输入字符，这时表单项只能通过从选择器中来选择值，用于combobox 2）readOnly：只读，用于combobox和textfield 3）...
- 对Extjs中store的多种操作
Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。 除了使用getCount()的方法外，还可以使用each()函数，如下面的代码所示。 1. store.each(function(record)...
- Android开发精典案例60个【源码】
60个Android开发精典案例，好东西 - 给大家分享60个Android开发的精典案例，包含任务监听、设备适配，游戏框架搭建，特效实现，多点触控，网络协议，游戏关卡设置等内容。特别是做游戏开发的朋友值得研究。喜欢就拿走吧！