ExtJs4常用配置方法備忘

viewport佈局常用屬性

 

            new Ext.Viewport({
                layout: "border",
                renderTo: Ext.getBody(),
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                //split為true，即可達到上下左右拉伸效果
                //layout:fit，填滿布局
                //collapsible:true，north模組被收縮到最上面
                items: [{ region: "north", height: "60%", collapsible: true, split: true, layout: "fit", border: true, items: [ClassTreeGrid] },
                        { region: "center", autoScroll: true, split: true, border: true, layout: "fit", items: [RecGrid] }
                ]
            });

Ext.window.Window拉伸屬性,以及textareafield，form的可拉伸屬性

提醒：resizable: true, //是否可以拉伸，同時也適用於textareafield，form等

 var AddDialog = Ext.create("Ext.window.Window", {
                layout: "fit",
                iconCls: 'a_add',
                closeAction: 'hide',        //視窗關閉的方式：hide/close
                resizable: true,            //是否可以拉伸
                closable: true,            //是否可以關閉
                modal: true,                //是否為模態視窗
                items: AddForm,
                buttons: [{
                    text: '新增',
                    iconCls: 'a_add',
                    id: "btnAdd",
                    handler: Add
                },
                {
                    id: "btnCancel",
                    iconCls: 'a_cross',
                    text: '重置',
                    handler: function () {
                        AddForm.form.reset();
                    }
                }]
            });

為空預設值，驗證配置，及驗證方法，column佈局

 var AddForm = Ext.create("Ext.form.Panel", {
                border: false,
                fieldDefaults: {
                    msgTarget: 'side',  //提示資訊在右旁邊顯示圖示
                    labelWidth: 70,
                    align: "right",
                    allowBlank: false //不與許為空
                },
                width: 380,
                defaults: {
                    padding: 10,
                },
                layout: 'column',
                items: [
                     {
                         xtype: "hidden",
                         name: 'quId',
                     },
                      {
                          xtype: "numberfield",
                          fieldLabel: '第幾題',
                          name: 'sorts',
                          regex: /^\d+$/,  //正則驗證
                          maxLength: 100,
                          columnWidth: 1,
                      },
                    {
                        xtype: "combo",
                        fieldLabel: '皮膚分類',
                        name: 'claId',
                        id: 'claId',
                        valueField: 'qcId',
                        displayField: 'claName',
                        columnWidth: 1,   //列布局站的比例，總共為1，多分為0.5+0.5 ....和為1 
                        allowBlank: false,
                        store: QuestionClassStore,
                        emptyText: "請選擇皮膚分類", //為空輸入框暗灰提示
                        blankText: "請選擇皮膚分類111", //錯誤提示
                    },
                     {
                         xtype: "filefield",
                         fieldLabel: '上傳圖片',
                         buttonText: '  瀏 覽  ',
                         regex: /^.+\.((jpg)|(gif)|(gif)|(png)|(jpeg)|(bmp))$/, //正則驗證
                         name: 'queImg',
                         allowBlank: true, //不允許為空
                         columnWidth: 1
                     },
                     {
                         xtype: "textareafield",
                         grow: true,
                         fieldLabel: '問題',
                         name: 'question',
                         columnWidth: 1
                     }

                ]
            });

            //新增問題
            function Add() {
                var form = AddForm.getForm();  //獲取表單form
                if (form.isValid()) {   //驗證表單
                    form.submit({
                        url: "/question/Add",
                        params: { json: Ext.JSON.encode(AddForm.form.getValues()) },
                        waitMsg: '正在上傳請稍候...',
                        success: function (form, action) {
                            Ext.Msg.alert("提示", action.result.msg);
                            QuestionGridStore.load();
                        },

                    })
                }
            }

給img的路徑src賦值

               itemclick: function () {
                        var rows = ShopPaperGrid.getView().getSelectionModel().getSelection();
                        if (typeof (rows[0]) != "undefined") {
                            Ext.getCmp("imgForm").getEl().dom.src = rows[0].data.imgPath;   //給src賦值
                        }
                        else {
                            Ext.getCmp("imgForm").getEl().dom.src = "/images/default.jpg";
                        }
                    }

ext.msg.confrim()

   Ext.Msg.confirm("提示", "確定刪除", function (btn) {
                //btn=yes或者no
                if (btn == "yes") {
                    alert("刪除成功");
                }
                else {
                    alert("取消啦刪除");
                }
            });

先寫這麼多，現在想不起來啦，想起來再加上，做為備忘部落格