Extjs4——表单与输入控件

最新推荐文章于 2021-10-25 10:50:47 发布
最新推荐文章于 2021-10-25 10:50:47 发布
阅读量226 收藏 1
点赞数
原文链接：http://www.cnblogs.com/chen1234/p/7532510.html
版权

 

1.表单的简单形式：

 

  var form = new Ext.form.FormPanel({
        title: 'form',
        defaultType: 'textfield',
        buttonAlign: 'center',
        frame: true,
        width: 220,
        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 70
        },

        items: [{
            fieldLabel: '文本框'
        }],
        buttons: [{
            text: '按钮'
        }]
    });
    form.render("form");

 

效果如下：

 

 2.Ext中的输入控件：

 

Ext中提供的包括的控件及其继承关系如下图：

 

 2.1 基本输入控件Ext.form.Field:

 

Field中定义了输入控件通用的属性和功能函数,它们大致分为三类：

 

 

 

    // HtmlEditor需要这个
    Ext.tip.QuickTipManager.init();

    var field1 = new Ext.form.TextField({
        fieldLabel: 'qtip',
        msgTarget: 'qtip',
        allowBlank: false
    });
    var field2 = new Ext.form.TextField({
        fieldLabel: 'title',
        msgTarget: 'title',
        allowBlank: false
    });
    var field3 = new Ext.form.TextField({
        fieldLabel: 'side',
        msgTarget: 'side',
        allowBlank: false
    });
    var field4 = new Ext.form.TextField({
        fieldLabel: 'under',
        msgTarget: 'under',
        allowBlank: false
    });

    var form = new Ext.form.FormPanel({
        title: 'form',
        frame: true,
        items: [field1, field2, field3, field4],
        renderTo: 'form'
    });


    form.getForm().isValid();

 

2.2 文本输入控件Ext.form.TextField:

 

除了Ext.form.Field提供的通用功能和属性外，TextField还可以检测输入的数据是否为空和输入内容的最大及最小长度

 

 // HtmlEditor需要这个
    Ext.QuickTips.init();

    var field = new Ext.form.TextField({
        fieldLabel: 'empty',
        allowBlank: false,
        emptyText: '空',
        maxLength: 50,
        minLength: 10
    });

    var form = new Ext.form.FormPanel({
        title: 'form',
        frame: true,
        items: [field],
        renderTo: 'form'
    });

});

 

效果如下：

 

 

2.3 多行文本输入控件Ext.form.TextArea

 

 // HtmlEditor需要这个
    Ext.QuickTips.init();

    var field = new Ext.form.TextArea({
        width: 200,
        grow: true,
//grow设为true时，多行文本框会根据输入内容自动修改高度，而Ext.form.TextFiel会自动修改宽度
        preventScrollbars: true,
//防止出现滚动条
        fieldLabel: 'empty',
        allowBlank: false,
        emptyText: '空',
        maxLength: 50,
        minLength: 10,
        value: '第一行\n第二行\n第三行\n第四行'
    });

    var form = new Ext.form.FormPanel({
        title: 'form',
        frame: true,
        items: [field],
        renderTo: 'form'
    });

 

2.4 日期输入控件Ext.form.DateField:

 

 var field = new Ext.form.DateField({
        fieldLabel: '日期',
        emptyText: '请选择',
        format: 'Y-m-d',
        disabledDays: [0,6]//禁止选星期六和星期日
    });

 

2.5  时间输入控件Ext.form.TimeField:

 

    var field = new Ext.form.TimeField({
        fieldLabel: '时间',
        emptyText: '请选择',
        minValue: '10:00 AM',
        maxValue: '2:00 PM',
        increment: 30 //时间间隔
    });

 

2.6 在线编辑器Ext.form.HtmlEditor:

 

 通过enable选项启用或禁用对应的功能按钮

 

var field = new Ext.form.HtmlEditor({
        fieldLabel: '在线编辑器',
        enableAlignments: true,
        enableColors: true,
        enableFont: true,
        enableFontSize: true,
        enableFormat: true,
        enableLinks: true,
        enableLists: true,
        enableSourceEdit: true,
        fontFamilies: ['宋体', '黑体']
    });

 

效果如下:

 

 

2.7 隐藏域ext.form.Hidden:

 

隐藏域ext.form.Hidden直接继承自Ext.form.Field,可以通过setValue（）和getValue（）函数对它执行赋值和取值操作，但她不会显示在页面上。

 

 var field = new Ext.form.Hidden({
        name: 'hiddenId'
    });
    field.setValue("some thing");
    var value = field.getValue();

    var form = new Ext.form.FormPanel({
        title: 'form',
        frame: true,
        items: [field],
        renderTo: 'form'
    });

 

2.8 复选框（Checkbox)和单选按钮（radio）：

2.8.1 复选框：

boxLabel是Checkbox和Radio两个控件独有的。

var form = new Ext.form.FormPanel({
        labelAlign: 'right',
        title: 'form',
        labelWidth: 50,
        buttonAlign: 'center',
        frame:true,
        url: 'form2.jsp',
        width: 280,

        items: [{
            xtype: 'fieldset',
            title: '多选',
            autoHeight:true,
            defaultType: 'checkbox',
            hideLabels: true,
            items: [
                {boxLabel: '多选一', inputValue: '1', checked: true},
                {boxLabel: '多选二', inputValue: '2'},
                {boxLabel: '多选三', inputValue: '3'}//inputValue来指定这三个CheckBox的值，以来区分它们
            ]
        }],
        buttons: [{
            text: '提交',
            handler: function() {
                form.getForm().submit();
            }
        }]
    });
    form.render("form");

 

2.8.2 单选按钮：

Ext中的单选按钮继承自复选框，radio有一个自己独有的getGroupValue（）函数，可以用来或得某个分组中被选中的Radio的值

var form = new Ext.form.FormPanel({
        labelAlign: 'right',
        title: 'form',
        labelWidth: 50,
        buttonAlign: 'center',
        frame:true,
        url: 'form2.jsp',
        width: 280,

        items: [{
            xtype: 'fieldset',
            title: '单选',
            autoHeight:true,
            defaultType: 'radio',
            hideLabels: true,
            items: [
                {boxLabel: '单选一', name: 'radio', inputValue: '1', checked: true},
                {boxLabel: '单选二', name: 'radio', inputValue: '2'},
                {boxLabel: '单选三', name: 'radio', inputValue: '3'}
            ]
        }],
        buttons: [{
            text: '提交',
            handler: function() {
                form.getForm().submit();
            }
        }, {
            text: 'getGroupValue',
            handler: function() {
                Ext.Msg.alert('信息', form.getForm().findField('radio').getGroupValue());
            }
        }]
    });
    form.render("form");

点击getGroupValue后的效果：

 

 

2.8.3 CheckBoxGroup和RadioGroup控件

 

有了这两个控件，我们就可以为复选框和单选按钮控件实现各种复杂的排列方式了,默认横向排列方式，可以通过设置column属性来设置按列（一列或多列）排列，还可以自定义多列排列。

    var form = new Ext.form.FormPanel({
        title: 'radio group',
        frame: true,
        width: 600,
        items: [{
            xtype: 'radiogroup',
            fieldLabel: '自动布局',
            items: [
                {boxLabel: 'Item 1', name: 'cb-auto-1'},
                {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-auto-3'},
                {boxLabel: 'Item 4', name: 'cb-auto-4'},
                {boxLabel: 'Item 5', name: 'cb-auto-5'}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: '单列',
            itemCls: 'x-check-group-alt',
            columns: 1,
            items: [
                {boxLabel: 'Item 1', name: 'cb-col-1'},
                {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-col-3'}
            ]
        },{
                xtype: 'radiogroup',
                fieldLabel: '多列（水平）',
                columns: 3,
                items: [
                    {boxLabel: 'Item 1', name: 'cb-horiz-1'},
                    {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
                    {boxLabel: 'Item 3', name: 'cb-horiz-3'},
                    {boxLabel: 'Item 4', name: 'cb-horiz-4'},
                    {boxLabel: 'Item 5', name: 'cb-horiz-5'}
                ]
        },{
            xtype: 'radiogroup',
            fieldLabel: '多列（竖直）',
            itemCls: 'x-check-group-alt',
            columns: 3,
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'cb-vert-1'},
                {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-vert-3'},
                {boxLabel: 'Item 4', name: 'cb-vert-4'},
                {boxLabel: 'Item 5', name: 'cb-vert-5'}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: '多列<br />（自定义）',
            columns: [100, 100],
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
                {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
                {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
                {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            itemCls: 'x-check-group-alt',
            fieldLabel: '自自定义布局',
            allowBlank: false,
            anchor: '95%',
            items: [{
                columnWidth: '.25',
                items: [
                    {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'Item 1', name: 'cb-cust-1'},
                    {boxLabel: 'Item 2', name: 'cb-cust-2'}
                ]
            },{
                columnWidth: '.5',
                items: [
                    {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
                ]
            },{
                columnWidth: '.25',
                items: [
                    {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'Item 4', name: 'cb-cust-4'},
                    {boxLabel: 'Item 5', name: 'cb-cust-5'}
                ]
            }]
        }]
    });

    form.render(document.body);

 

效果如下：

 

 2.9 滑动条表单控件：

 

 var form = new Ext.form.FormPanel({
        width : 400,
        height: 160,
        title : '滑动条表单控件',

        bodyStyle  : 'padding: 10px;',
        renderTo   : 'container',
        defaultType: 'sliderfield',
        buttonAlign: 'left',

        defaults: {
            anchor: '95%',
            tipText: function(thumb){
                return String(thumb.value) + '%';
            }
        },
        items: [{
            fieldLabel: 'Sound Effects',
            value: 50,
            name: 'fx'
        },{
            fieldLabel: 'Ambient Sounds',
            value: 80,
            name: 'ambient'
        },{
            fieldLabel: 'Interface Sounds',
            value: 25,
            name: 'iface'
        }],
        buttons: [{
            text: 'submit'
        }, {
            text: 'reset'
        }]
    });

 

效果如下：

 

也可以在同一滑动条上指定多个滑块，让用户可以同时指定多个数值，只需为values属性指定一个数组

  var horizontal = new Ext.Slider({
        renderTo: 'multi-slider-horizontal',
        width   : 214,
        minValue: 0,
        maxValue: 100,
        values  : [10, 50, 90],
        plugins : new Ext.slider.Tip()
    });

    var vertical = new Ext.Slider({
        renderTo : 'multi-slider-vertical',
        vertical : true,
        height   : 214,
        minValue: 0,
        maxValue: 100,
        values  : [10, 50, 90],
        plugins : new Ext.slider.Tip()
    });

    Ext.get('btn').on('click', function() {
        Ext.Msg.alert('info', horizontal.getValues() + '|' + vertical.getValues());
    });

 

效果如下：

 2.10  ComboBox控件：

Ext中的combobox与HTML中的select没有任何关系，它完全是div重写的

 

 2.10.1 ComboBox读取远程数据：

 

    //使用HTTPProxy访问04-04-01.txt,并使用ArrayReader把获得的数据分成value和text两列
var store = new Ext.data.Store({
        proxy: {
            type: 'ajax',
            url: '04-04-01.txt',
            reader: {
                type: 'array'
            }
        },
        fields: [
            {name: 'value'},
            {name: 'text'}
        ]
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        emptyText: '请选择',
        mode: 'remote',//默认为local
        triggerAction: 'all',//默认query,他使用autocomplete功能
        //autocomplete会根据输入的内容将不匹配的结果过滤掉

        valueField: 'value',
        displayField: 'text',
        renderTo: 'combo'
    });

 

04-04-01.txt的数据如下:

[
    ['value1','text1'],
    ['value11','text11'],
    ['value111','text111'],
    ['value1111','text1111'],
    ['value11111','text11111'],
    ['value2','text2'],
    ['value22','text22'],
    ['value222','text222'],
    ['value2222','text2222'],
    ['value22222','text22222']
]

 

效果如下：

2.10.2 为ComboBox添加功能：

 

    var store = new Ext.data.Store({
        proxy: {
            type: 'ajax',
            url: '04-04-01.txt',
            reader: 'array'
        },
        fields: ['value', 'text']
    });

    var combo = new Ext.form.ComboBox({
        store: store,
        emptyText: '请选择',
        mode: 'remote',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text',
        renderTo: 'combo',
        minListWidth: 220,//下拉列表的宽度
        pageSize:5,//每次显示多少条记录
        editable: false//是否允许用户自己填写内容
    });
});

 

2.10.3监听用户的选择：

 

var data = [
        ['value1','text1'],
        ['value2','text2'],
        ['value11','text11'],
        ['value12','text12']
    ];

    var store = new Ext.data.ArrayStore({
        fields: ['value', 'text'],
        data: data
    });

    var combo = new Ext.form.ComboBox({
        store: store,
        emptyText: '请选择',
        mode: 'local',
        valueField: 'value',
        displayField: 'text',
        renderTo: 'combo'
    });

    combo.on('select', function(comboBox){
        alert(comboBox.getValue() + '-' + comboBox.getRawValue());
    });

 

效果如下：

2.10.4 MutiSelect和ItemSelector扩展控件：

这两种控件补充了ComboBox没有的一些功能，它们需要在HTML中引入对应的js文件后才能使用

 

                                     

 

转载于:https://www.cnblogs.com/chen1234/p/7532510.html

weixin_30707875
关注
ExtJS 4.2.4 完整版本
08-26
ExtJS 4.2.4 完整版本 Release Notes for Ext JS 4.2.4 Release Date: July 29, 2015 Version Number: 4.2.4.1720
ExtJS4 相关
最新发布
Lyndon的专栏
06-30 289
在Ext中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。与Ext.Container相似，所有的布局类也有一个共同的超类Ext。凡是继承自该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了Ext中完整的布局系统。另外要说明的是我们经常使用Viewport对整个页面进行布局，而且每个页面只能有一个Viewport。1.Auto自动布局（系统默认）
ExtJs4基础
Clare Tung
12-12 1006
JSON结构 JSON有数组和对象两种结构： 对象结构：用大括号作为开始和结尾{}，中间可以用0个或多个，（逗号）分隔的”key/value“列表组成，关键字和值之间用：（冒号）分隔。 { key1:value1, key2:value2, … } 其中关键字是字符串，值可以是字符串、数值、true、false、null对象或数组。 数组结构:用中括号开始和结尾[]。中间有0个或多个，（逗号）...
extjs4简介
不了了之专栏
12-06 1538
Ext JS 4简介 Ext JS 4目前是Sencha的产品，4.x的正式版本号是4.0.7。Ext JS 4提供商业版本，但如果您的项目是开源的，则可以免费使用Ext JS 4。Ext JS的论坛目前非常活跃；Ext JS还在不但地升级改进，据Sencha官方统计，使用Ext JS的开发者数目在一百万以上。 Ext JS 4与之前版本的比较 渲染效率提高 所有类都经过调
ExtJS 4 树
weixin_34268310的博客
04-03 112
本文原地址http://www.showframework.com/2012/08/extjs-4-trees/ Tree Panel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。Tree Panel和Grid Panel继承自相同的基类，所以所有从Grid Panel能获得到的特性、扩展、插件等带来的好处，在Tree Panel中也同样可以获得。列、...
EXTJS4自学手册
05-03
目录： 一 Extjs 基础 EXTJS4自学手册——EXT文件目录，本地加载文档，命名规范 EXTJS4自学手册——EXT基本方法、属性（onReady、define、create） EXTJS4自学手册——EXT...EXTJS4自学手册——页面控件（表单控件）
FineUI 基于ExtJS的ASP.NET控件库
06-14
【FineUI】是一款专为ASP.NET开发者设计的前端控件库，它基于流行的JavaScript框架——【ExtJS】，提供了一套完整的、易于使用的界面组件，旨在简化Web应用开发过程，提高开发效率。FineUI不仅提供了丰富的UI控件，...
ASP.NET源码——ResviewCRM的ExtJS页面程序.zip
10-10
4. ASP.NET与ExtJS结合：在ResviewCRM中，ASP.NET作为后端处理数据和业务逻辑，而ExtJS作为前端展示用户界面。两者通过AJAX进行通信，实现了前后端的分离。当用户在前端进行操作时，如填写表单或查看数据，这些操作...
轻松搞定Extjs
10-16
**: 展示了如何使用分割线等布局控件来组织表单元素。 - **表单初始化**: 介绍了如何设置表单的初始状态，如默认值等。 #### 叹为观止的表格组件——GridPanel 表格组件是展示大量数据的最佳选择，GridPanel则是...
浅谈JavaScript 库———jQuery, ExtJs 的对比研究
12-29
### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA（Rich Internet Applications）技术的普及，JavaScript作为一种前端开发的重要工具，逐渐占据了重要的地位。它不再仅仅是用于...
extjs4自定义深蓝色主题
11-17
之前项目使用的一个深蓝色主题，继承自extjs4原生classic主题。 先引入ext-ux-all.css，再引入fixed.css
ExtJS 4 技术详解，全面解析ExtJS 4
02-07
全面解析ExtJS4以及使用经验总结，包括新特性。
extjs4完整下载
07-29
ExtJS4正式版（官方完整下载包）：含所有的源代码，html，api文档，示例。官方网站下载现在需要注册，这个仅供爱好者个人学习使用，如果项目中使用请至官方网站购买。
ExtJs4官方的api文档及示例
01-02
很实用的示例及文档。版本为4.1，对初学者以及开发人员很有帮助。 很实用的示例及文档。版本为4.1，对初学者以及开发人员很有帮助。
Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用
10-23
Extjs4 comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用。来源于网络，稍作修改。
ExtJs4学习笔记一－－基础知识
逸雨涵梦的专栏
08-21 3601
开始学习ExtJs4，陆续记录学习过程，希望有所用处：  特别注意：在这里有些写法还是沿用之前版本，效果依然能够出来，当时最好进行改动，例如new可以改为Ext.create  一、基础知识  1、JAON对象的例子  Javascript代码   "text/javascript">           var person  =  { //json对象定
ExtJS4组件_Grid配置-属性-方法详解-案例
heitdf
12-10 5771
1、Ext.grid.GridPanel 主要配置项： store：表格的数据集 columns：表格列模式的配置数组，可自动创建ColumnModel列模式 autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0 stripeRows：表格是否隔行换色，默认为false cm、colModel：表格的列模式，渲染表格时必须设置该配置项 sm、sel
Extjs4教程一之入门教学
qq_17522839的专栏
08-14 2532
最近刚到一家新公司
ExtJS4——Ext.onReady、Ext.define、Ext.create基础方法
ヾ凉秋的博客
10-25 1054
Ext.onReady 说明：onReady内的语句块会在页面上下文加载后再执行 例子： rel="stylesheet" type="text/css" /> Ext.onReady(function () { //获取页面元素，元素ID为“onReady” var input = Ext.get("onReady"); Ext.Msg.alert("隐藏控件内容",input.dom.value); });
ExtJS4.2带时分秒的日期控件扩展实现
EXTJS4.2的日期时间控件扩展提供了一种简单而有效的方法来处理日期时间的输入，使开发者能够创建更丰富的用户界面。这个扩展不仅可以提高用户体验，还可以减少开发者在处理日期时间输入时的编码工作。在实际应用中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值