关闭

Extjs xtypes 常见示例

标签: extjs
408人阅读 评论(0) 收藏 举报
分类:
var individual = {
        xtype: 'container',
        layout: 'hbox',
        margin: '0 0 10',
        items: [{
            xtype: 'fieldset',
            flex: 1,
            title: 'Individual Checkboxes',
            defaultType: 'checkbox', // each item will be a checkbox
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                hideEmptyLabel: false
            },
            items: [{
                xtype: 'textfield',
                name: 'txt-test1',
                fieldLabel: 'Alignment Test'
            }, {
                fieldLabel: 'Favorite Animals',
                boxLabel: 'Dog',
                name: 'fav-animal-dog',
                inputValue: 'dog'
            }, {
                boxLabel: 'Cat',
                name: 'fav-animal-cat',
                inputValue: 'cat'
            }, {
                checked: true,
                boxLabel: 'Monkey',
                name: 'fav-animal-monkey',
                inputValue: 'monkey'
            }]
        }, {
            xtype: 'component',
            width: 10
        }, {
            xtype: 'fieldset',
            flex: 1,
            title: 'Individual Radios',
            defaultType: 'radio', // each item will be a radio button
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                hideEmptyLabel: false
            },
            items: [{
                xtype: 'textfield',
                name: 'txt-test2',
                fieldLabel: 'Alignment Test'
            }, {
                checked: true,
                fieldLabel: 'Favorite Color',
                boxLabel: 'Red',
                name: 'fav-color',
                inputValue: 'red'
            }, {
                boxLabel: 'Blue',
                name: 'fav-color',
                inputValue: 'blue'
            }, {
                boxLabel: 'Green',
                name: 'fav-color',
                inputValue: 'green'
            }]
        }]
    };

CheckGroup example

var checkGroup = {
        xtype: 'fieldset',
        title: 'Checkbox Groups (initially collapsed)',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        collapsible: true,
        collapsed: true,
        items: [{
            xtype: 'textfield',
            name: 'txt-test3',
            fieldLabel: 'Alignment Test'
        },{
            // Use the default, automatic layout to distribute the controls evenly
            // across a single row
            xtype: 'checkboxgroup',
            fieldLabel: 'Auto Layout',
            cls: 'x-check-group-alt',
            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: 'checkboxgroup',
            fieldLabel: 'Single Column',
            // Put all controls in a single column with width 100%
            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: 'checkboxgroup',
            fieldLabel: 'Multi-Column (horizontal)',
            cls: 'x-check-group-alt',
            // Distribute controls across 3 even columns, filling each row
            // from left to right before starting the next row
            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: 'checkboxgroup',
            fieldLabel: 'Multi-Column (vertical)',
            // Distribute controls across 3 even columns, filling each column
            // from top to bottom before starting the next column
            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: 'checkboxgroup',
            fieldLabel: 'Multi-Column<br />(custom widths)',
            cls: 'x-check-group-alt',
            // Specify exact column widths (could also include float values for %)
            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: 'checkboxgroup',
            fieldLabel: 'Custom Layout<br />(w/ validation)',
            allowBlank: false,
            msgTarget: 'side',
            autoFitErrors: false,
            anchor: '-18',
            // You can change the 'layout' to anything you want, and include any nested
            // container structure, for complete layout control. In this example we only
            // want one item in the middle column, which would not be possible using the
            // default 'checkboxgroup' layout's columns config.  We also want to put
            // headings at the top of each column.
            layout: 'column',
            defaultType: 'container',
            items: [{
                columnWidth: .25,
                items: [
                    {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 2', name: 'cb-cust-2'}
                ]
            },{
                columnWidth: .5,
                items: [
                    {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
                    {xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
                ]
            },{
                columnWidth: .25,
                items: [
                    {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 5', name: 'cb-cust-5'}
                ]
            }]
        }]
    };

RadioGroup examples

var radioGroup = {
        xtype: 'fieldset',
        title: 'Radio Groups',
        // in this section we use the form layout that will aggregate all of the fields
        // into a single table, rather than one table per field.
        layout: 'form',
        collapsible: true,
        items: [{
            xtype: 'textfield',
            name: 'txt-test4',
            fieldLabel: 'Alignment Test'
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Auto Layout',
            cls: 'x-check-group-alt',
            items: [
                {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Single Column',
            columns: 1,
            items: [
                {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Multi-Column (horizontal)',
            cls: 'x-check-group-alt',
            columns: 3,
            items: [
                {boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3},
                {boxLabel: 'Item 1', name: 'rb-horiz-2', inputValue: 1, checked: true},
                {boxLabel: 'Item 2', name: 'rb-horiz-2', inputValue: 2}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Multi-Column (vertical)',
            columns: 3,
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Multi-Column<br />(custom widths)',
            cls: 'x-check-group-alt',
            columns: [100, 100],
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Custom Layout<br />(w/ validation)',
            allowBlank: false,
            msgTarget: 'side',
            autoFitErrors: false,
            anchor: '-18',
            layout: 'column',
            defaultType: 'container',
            items: [{
                columnWidth: .25,
                items: [
                    {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
                    {xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
                    {xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
                ]
            },{
                columnWidth: .5,
                items: [
                    {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
                    {xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
                ]
            },{
                columnWidth: .25,
                items: [
                    {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
                    {xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
                    {xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
                ]
            }]
        }]
    };

form

 // combine all that into one huge form
    var fp = Ext.create('Ext.FormPanel', {
        title: 'Check/Radio Groups Example',
        frame: true,
        fieldDefaults: {
            labelWidth: 110,
            labelStyle: 'color:green;padding-left:4px'
        },
        width: 600,
        renderTo:'form-ct',
        bodyPadding: 10,
        items: [
            individual,
            checkGroup,
            radioGroup
        ],
        buttons: [{
            text: 'Save',
            handler: function(){
               if(fp.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                        fp.getForm().getValues(true).replace(/&/g,', '));
                }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });
0
0
查看评论

推荐一个ExtJS的综合示例

由于ExtJS算是一重量级的客户端框架了,如何把他与传统的Web应用集成也是比较重要的,是所有的地方都用Ext,还是在某些地方使用,另外是每一个页面都引入ext-all.js,还是让整个应用只加载在这个大家伙一次,如何开发自定义的控件,如何充分使用javascript的面向对象特性对我们的应用进行封...
  • easyjf
  • easyjf
  • 2008-01-22 12:52
  • 3394

EXT JS认识EXTJS,第一个EXTJS例子

大部分内容转载自:http://blog.csdn.net/wanghuan203/article/details/8011112 和http://www.cnblogs.com/willick/p/3168809.html 但是以上用的是.net ,我这里使用Java。 EXT是基于Web的富客户...
  • Jerome_s
  • Jerome_s
  • 2014-07-21 19:07
  • 2196

ExtJS4快速入门实例

从ExtJS1.1版本开始关注到现在的4.1版本,一直没下决心整理ExtJS的资料。现在整理了一下4.1的版本入门使用方法。只需简单2步就可以了。 第一步:把ext-all.js、  resource资源文件夹copy到项目工程中。 第二步:在页面写上以下代码。
  • azhou2012
  • azhou2012
  • 2012-03-28 22:00
  • 1246

Extjs Desktop admin 模块示例

admin模块下有
  • mychirs
  • mychirs
  • 2014-08-29 12:41
  • 553

EXTJS 组件开发(完整例子)

目标:EXTJS组件开发,从component基础实现一个TAB控件。 使用EXTJS版本为5.0。测试通过。 这个例子还很初级,仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。 EXT JS TEST .tabsDiv{ width:500px;hei...
  • hongweigg
  • hongweigg
  • 2015-01-15 17:30
  • 5106

ExtJS第一天实例

第一步当然是引进类库文件啦,具体引进的东西可以看上一篇博客 第二步:创建一个jsp文件 Helloword.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" p...
  • w_l_j
  • w_l_j
  • 2012-05-07 17:50
  • 3874

常见的乱码示例

常见的乱码示例
  • qzp1991
  • qzp1991
  • 2014-12-11 11:53
  • 1884

Extjs 4 生成饼状图实例

前台: //远程读取设备去向图表数据 var Store1 = new Ext.data.Store({ proxy:{ type:'ajax', url:'/newmaterial/servlet/GetCountChartGoDatas'...
  • Primary_wind
  • Primary_wind
  • 2014-06-19 16:35
  • 2713

EXTJS 中Ajax 应用示例

简单的Ext.Ajax. request示例 var requestConfig = { url :loginServer.jsp,//请求的服务器地址 params : {userName : tom,password : 123},//请求参数 customer : 自定义属性,//附加属...
  • homsky
  • homsky
  • 2010-04-05 15:17
  • 4975

我的extjs学习之路2—信息展示和信息筛选的实现

用了一个周的时间熟悉了几个比较常用到的组件,根据API提供的示例也写出了几个比较粗陋的UI,下面的时间就投入到了ExtJs的具体应用上来。 数据的查询部分 数据的查询无非是将查询出来的数据传到前台显示。稍微复杂一点就是通过部分的查询条件来将数据查出来,然后通过前台展示。那么如何实现ExtJs和后...
  • liunian02050328
  • liunian02050328
  • 2014-08-25 08:51
  • 2745
    个人资料
    • 访问:1360413次
    • 积分:18987
    • 等级:
    • 排名:第566名
    • 原创:729篇
    • 转载:20篇
    • 译文:5篇
    • 评论:193条
    博客专栏
    最新评论