因公司项目需要引入了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);
});
分享到:
相关推荐
然而,有时开发人员可能需要对这些控件进行自定义,以满足特定业务需求,比如在本例中,我们需要扩展EXTJS的时间控件以实现“年度”选择的功能。 EXTJS的Date Picker默认提供了日、月、年的选择,但可能并不完全...
在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间,通常以小时、分钟和秒为单位,提供了用户友好的界面和丰富的...
ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件,它允许开发者在按钮上显示图片,以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素,比如导航按钮或者操作按钮。下面我们将深入探讨...
ExtJS 5 Combogrid 控件是Sencha公司开发的ExtJS框架中的一款高级组件,主要用于在表单中实现下拉列表与表格的结合,提供更丰富的数据展示和选择功能。Combogrid控件结合了combobox(下拉框)和grid(数据网格)的...
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...
extjs4.1部分控件示例 MVC2 VS2010
在ExtJS中,微调控件(Spinner)是一种用户界面组件,它允许用户通过点击向上或向下的箭头以微小增量增加或减少数值,常见于输入框旁边,提供一种方便的数值调整方式。这个控件在处理精确输入或者范围限制的数值时...
在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...
在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于处理用户输入的日期和时间数据。这些控件具有高度可定制性,可以满足各种界面和功能需求。 1. **时间控件...
ExtJS 的时间控件也支持响应式布局,可以根据屏幕大小自动调整其显示方式,确保在各种设备上都有良好的用户体验。 9. **与服务器端的交互** 选定的时间可以通过AJAX请求发送到服务器,进行验证或存储。在提交表单...
在ExtJS 4.2版本中,开发者可以使用DateTime控件来处理日期和时间的选择与显示,这尤其适用于需要精确到时分秒的场景。这个控件是ExtJS对基础日期选择器的扩展,增加了对时间部分的细致控制。 DateTime控件在ExtJS ...
在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...
综上所述,这个压缩包集合了多种基于ExtJs的扩展控件,为开发者提供了丰富的工具来构建功能丰富的Web应用。通过深入学习和实践,开发者不仅可以提升自己的ExtJs技能,还能在项目中创造更加独特和高效的应用体验。...
1. **兼容性**:确保控件与你当前使用的ExtJs版本兼容,以及在目标浏览器上运行良好。 2. **功能需求**:评估每个控件是否满足你的功能需求,比如是否支持日期范围选择、是否提供时间刻度选择、是否可以自定义显示...
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
extjs的年月选择控件,主要针对原有的extjs Datefield控件的基础上增加了插件
在EXTJS中,时间控件是常见的交互元素,允许用户选择特定的时间,包括年、月、日、时、分和秒。这篇文档将深入探讨EXTJS中的时间控件及其使用方法。 首先,EXTJS时间控件的设计理念是为了提供用户友好的时间选择...
由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发...虽然网上有ext2.0的日期扩展控件,但在3.0中不能用。公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。希望对大家有帮助。
在ExtJS中,搜索控件和插件是提升用户体验、实现高效数据查找的关键元素。本篇将深入探讨这些知识点,以帮助你更好地理解和应用。 首先,我们要了解`SearchField.js`在这个上下文中的作用。通常,这是一个自定义...