Extjs 基本Form元素

1.文本框

            var txtName = new Ext.form.TextField({
                fieldLabel: '名稱',
                anchor: '90%'
            });

2.下拉框

    var storeCheckPoint = new Ext.data.SimpleStore({
        fields: ['value', 'text'],
        data: [
                        ['Sales Type', 'Sales Type'],
                        ['課', '課'],
                        ['擔當者', '擔當者'],
                        ['顧客', '顧客'],
                        ['最終顧客', '最終顧客'],
                        ['工場', '工場'],
                        ['D-Cate', 'D-Cate'],
                        ['品番', '品番']
                      ]
    });

    var cboTypeCheckPoint = new Ext.form.ComboBox({
        fieldLabel: '選擇項',
        mode: 'local',
        width: 100,
        store: storeCheckPoint,
        value: "Sales Type",
        valueField: 'value',
        displayField: 'text',
        editable: false,
        triggerAction: 'all',
        forceSelection: true
    });

3.單選按鈕

    var ImportExportType = new Ext.form.RadioGroup({
        fieldLabel: '進出口類型',
        anchor: '50%',
        id: 'rdoBelongsTo',
        columns: 2,
        vertical: true,
        items: [
            { boxLabel: '進口', name: 'rdoImportExportType', inputValue: '1', checked: true },
            { boxLabel: '出口', name: 'rdoImportExportType', inputValue: '2' }
        ]
    });

4.日期控件

    var CurrentDate = new Ext.form.DateField({
        fieldLabel: '',
        anchor: '50%',
        format: 'Y-m-d',
        value: new Date(),
        allowBlank: false
    });

5.按鈕

    var btnReset = new Ext.Button({
        text: '重置',
        iconCls: 'icon_reset',//類樣式名
        handler: function() {
           Ext.Msg.show({
               title: '提示信息',
               msg: '是否確定執行操作？',
               buttons: Ext.Msg.YESNO,
               fn: function(button, text) {
                   if (button == 'yes') {
                     formPanel.form.reset(); 
                         }
                     },
                   icon: Ext.MessageBox.QUESTION
               });

           }
    });

7.文本域

            //備注
            var txtRemark = new Ext.form.TextArea({
                fieldLabel: '備注',
                id: 'txtRemark',
                name: 'COMMENTSAPPAND',
                anchor: '50%',
                maxLength: 500,
                height: 100
            });

8.數字文本框

        var txtChuhuoDateWarn = new Ext.form.NumberField({
            fieldLabel: '  ',
            id: "txtChuhuoDateWarn",
            allowBlank: false,
            tabIndex: 60,
            width: "60%"
        });

9.復選框

        //建築物
        var chkBuilding = new Ext.form.CheckboxGroup({
            fieldLabel: jsonDataDictionary.labJZW,
            tabIndex: 175,
            width: 480,
            columns: 3,
            items: [
            //新建
                    {boxLabel: jsonDataDictionary.labXJ, name: '0', inputValue: '0' },
            //改建
                    {boxLabel: jsonDataDictionary.labGJ, name: '1', inputValue: '1' },
            //其他
                    {boxLabel: jsonDataDictionary.labQT, name: '2', inputValue: '2' }
                ],
            listeners: {
                'change': function() {
                    var tks;
                    for (var i = 0; i < chkBuilding.items.length; i++) {
                        if (chkBuilding.items.itemAt(i).checked) {

                            if (chkBuilding.items.itemAt(i).name == "2") {
                                tks = "YT";
                            }
                        }
                    }
                     //根據復選框選中的值來控制某一個控件的顯示或影藏
                    if (tks == "YT") {
                        txtOtherBuilding.enable();
                        txtOtherBuilding.getEl().up('.x-form-item').setDisplayed(true);
                    } else {
                        txtOtherBuilding.disable();
                        txtOtherBuilding.getEl().up('.x-form-item').setDisplayed(false);
                    }
                }
            }
        });

10.表單工具欄

                    var tbCPForm = new Ext.Toolbar({
                        items: [
                              { xtype: "tbspacer" },//分割線
                              { xtype: "tbspacer" },
                              { xtype: "tbspacer" },
                              { xtype: "tbspacer" },
                               btnCPReset,//控件元素
                              { xtype: "tbseparator" },
                              btnCPSubmit,//控件元素
                              { xtype: "tbseparator" }
                             ]
                    });

 

11.form 表單

            var pnForm1 = new Ext.form.FormPanel({
                title: '標示信息',
                labelAlign: 'right',
                buttonAlign: 'left',
                labelWidth: 100,
                padding: 20,
                autoWidth: true,
                autoScroll: true,
                items: [
                            {
                              columnWidth: 1,
                              layout: 'form',
                              border: false,
                              items: []
                             }
                          ]
            });