Extjs4——表單與輸入控件

 

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文件后才能使用