因公司项目需要引入了extjs中fieldset,要求在页面载入的时候选中或者取消fieldset控件中选中和取消标题上的checkbox,api文档中有个toggleCollapse()方法。不过,用的不太理想,总是当关闭的时候再调用则会打开,反之亦然;翻来下源码
toggleCollapse : function(animate){
this[this.collapsed ? 'expand' : 'collapse'](animate);
return this;
}
不难看出是调用expand(alimate)或者collapse(alimate)方法。
alimate为true,使用动画效果,也即动作慢慢的滑动;
alimate为false,不使用动画效果,此时动作会很快。
具体例子如下:
Ext.onReady(function(){
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 500,
items: [{
id : 'fs',
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'
}
]
}],
buttons: [{
text: '选中并打开(动画)',
handler : function() {
var fs = Ext.getCmp('fs');
fs.expand(true);
}
},{
text: '不选并关闭(动画)',
handler : function() {
var fs = Ext.getCmp('fs');
fs.collapse(true);
}
},{
text: '选中并打开(普通)',
handler : function() {
var fs = Ext.getCmp('fs');
fs.expand(false);
}
}, {
text: '不选并关闭(普通)',
handler : function() {
var fs = Ext.getCmp('fs');
fs.collapse(false);
}
}]
});
fsf.render(document.body);
});
分享到:
相关推荐
可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。
extjs扩展年度控件,EXTJS里的时间控件的年度重写
ExtJs图片按钮控件:设置文字、文字颜色、背景图片、是否可用
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
extjs4.1部分控件示例 MVC2 VS2010
Extjs fieldset两行两列布局
extjs时间空间精确秒
extjs 时间控件
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
extjs的年月选择控件,主要针对原有的extjs Datefield控件的基础上增加了插件
由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发...虽然网上有ext2.0的日期扩展控件,但在3.0中不能用。公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。希望对大家有帮助。
extjs 微调控件,时间微调控件,微调,javascript 微调 v2.0以上都可以用!!!
Coolite Toolkit非常适合做web应用程序的开发,它提供了很多专业的Asp.net输入/验证/显示控件,和页面布局的框架,同时完全支持ajax,因为它是所有的组件是居于ExtJS上封装出来,让开发人员在可视化的设计器内进行...
Extjs4 日期控件,带年月日时分秒 里面有使用说明 方便简易
ExtJs4 Checkbox tree
NULL 博文链接:https://xiaomy.iteye.com/blog/2280261
extjs 6 的日期时间控件,不能用我铲脸
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
extjs4.2 日期控件扩展,带年月日时分秒的选择。