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: []

                             }

                          ]

            });