`
hrl_100_eyejava
  • 浏览: 24240 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs中fieldset控件中选中和取消标题上的checkbox

    博客分类:
  • js
 
阅读更多

     因公司项目需要引入了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里的时间控件的年度重写

    然而,有时开发人员可能需要对这些控件进行自定义,以满足特定业务需求,比如在本例中,我们需要扩展EXTJS的时间控件以实现“年度”选择的功能。 EXTJS的Date Picker默认提供了日、月、年的选择,但可能并不完全...

    extjs时间控件精确秒

    在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间,通常以小时、分钟和秒为单位,提供了用户友好的界面和丰富的...

    ExtJs图片按钮控件

    ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件,它允许开发者在按钮上显示图片,以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素,比如导航按钮或者操作按钮。下面我们将深入探讨...

    extjs 5 combogrid控件

    ExtJS 5 Combogrid 控件是Sencha公司开发的ExtJS框架中的一款高级组件,主要用于在表单中实现下拉列表与表格的结合,提供更丰富的数据展示和选择功能。Combogrid控件结合了combobox(下拉框)和grid(数据网格)的...

    extjs年份控件(只显示年,无月日时分秒)

    Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)

    Extjs fieldset两行两列布局

    在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...

    extjs4.1部分控件示例

    extjs4.1部分控件示例 MVC2 VS2010

    extjs 微调控件,时间微调控件,微调,javascript 微调

    在ExtJS中,微调控件(Spinner)是一种用户界面组件,它允许用户通过点击向上或向下的箭头以微小增量增加或减少数值,常见于输入框旁边,提供一种方便的数值调整方式。这个控件在处理精确输入或者范围限制的数值时...

    Extjs 5 日期时间控件

    在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...

    extjs3.2、3.3 时间控件 日期控件扩展

    在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于处理用户输入的日期和时间数据。这些控件具有高度可定制性,可以满足各种界面和功能需求。 1. **时间控件...

    extjs 时间控件

    ExtJS 的时间控件也支持响应式布局,可以根据屏幕大小自动调整其显示方式,确保在各种设备上都有良好的用户体验。 9. **与服务器端的交互** 选定的时间可以通过AJAX请求发送到服务器,进行验证或存储。在提交表单...

    extjs4.2 datetime控件

    在ExtJS 4.2版本中,开发者可以使用DateTime控件来处理日期和时间的选择与显示,这尤其适用于需要精确到时分秒的场景。这个控件是ExtJS对基础日期选择器的扩展,增加了对时间部分的细致控制。 DateTime控件在ExtJS ...

    extjs网页控件开发

    在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...

    ExtJs:收集基于ExtJs扩展的一些控件

    综上所述,这个压缩包集合了多种基于ExtJs的扩展控件,为开发者提供了丰富的工具来构建功能丰富的Web应用。通过深入学习和实践,开发者不仅可以提升自己的ExtJs技能,还能在项目中创造更加独特和高效的应用体验。...

    网上下载的三个ExtJs时间日期控件

    1. **兼容性**:确保控件与你当前使用的ExtJs版本兼容,以及在目标浏览器上运行良好。 2. **功能需求**:评估每个控件是否满足你的功能需求,比如是否支持日期范围选择、是否提供时间刻度选择、是否可以自定义显示...

    extjs扩展的月份控件

    同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目

    extjs年月选择控件

    extjs的年月选择控件,主要针对原有的extjs Datefield控件的基础上增加了插件

    EXTJS时间控件年月日时分秒

    在EXTJS中,时间控件是常见的交互元素,允许用户选择特定的时间,包括年、月、日、时、分和秒。这篇文档将深入探讨EXTJS中的时间控件及其使用方法。 首先,EXTJS时间控件的设计理念是为了提供用户友好的时间选择...

    extjs3.0 中扩展的日期控件

    由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发...虽然网上有ext2.0的日期扩展控件,但在3.0中不能用。公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。希望对大家有帮助。

    ExtJs搜索控件、插件

    在ExtJS中,搜索控件和插件是提升用户体验、实现高效数据查找的关键元素。本篇将深入探讨这些知识点,以帮助你更好地理解和应用。 首先,我们要了解`SearchField.js`在这个上下文中的作用。通常,这是一个自定义...

Global site tag (gtag.js) - Google Analytics