Extjs 기본 Form 요소

11777 단어 ExtJs
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: []

                             }

                          ]

            });

좋은 웹페이지 즐겨찾기