Extjs xtypes 常见示例

来源：互联网发布：阿里云大学在哪里编辑：程序博客网时间：2024/06/06 09:23

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