Extjs基礎(一)

1.1基礎學習
說明：
本示例的所有代碼均在extjs6.2版本上測試通過,學習內容來源於官方文檔和自己的一些見解。
1.1.1window組件
簡單的一個window面板：

title: '窗口標題',
    height: 220,  //可以使用百分比
    width: 220,  
    html: '內容部分',
    resizable: true, //允許改變大小
    modal: true,     //設置遮罩層
    closable: true,   //設置顯示關閉按鈕
    autoShow: true,  //自動顯示
    maximizable: true,//顯示最大化按鈕
    minimizable: true //顯示最小化按鈕
});

一、屬性
plain：布爾類型，true表示強制與背景色保持協調，默認值爲false。
resizable：布爾類型，用戶是否可以調整窗體大小，默認值爲true表示可以調整大小。
maxinizable：布爾類型，true表示顯示最大化按鈕，默認值爲false。
maximized：布爾類型，true表示顯示窗體時將窗體最大化，默認值爲false。
closable：布爾類型，true表示顯示關閉按鈕，默認值爲true。
bodyStyle：與邊框的間距，如：bodyStyle:“padding:3px”。
buttonAlign：窗體中button的對齊方式(left、center、right)，默認值爲right。
closeAction："close"釋放窗體所佔內存，“hide"隱藏窗體，建議使用"hide”。

針對單個組件有handler事件可以處理：

二、方法
show：打開窗體。
setHidden(Boolean)：隱藏窗體。
close：關閉窗體。
三、事件
show：打開窗體時觸法。
hide：隱藏窗體時觸法。
close：關閉窗體時觸法。

1.1.2formPanel組件
繼上一小節window窗口組件，增加一個表單面板：

const form = Ext.create('Ext.form.Panel', {
    title: '標題',
    width: 200,
    height: 100,
    html: '表單內容',
    style: 'margin:10px',//設置一個樣式
    // frame: true
});

一、屬性
width:整型，表單寬度。
height:整型，表單高度。
url:字符串，表單提交地址。
二、方法
reset:表單重置。
isValid:表單是否驗證全部通過。
submit:表單提交。



點擊提交可以發現有請求信息,但是現在還不能訪問遠程,簡單來說，就是你項目部署在tomcat中,只能是當前項目訪問當前的服務端代碼,比如/request/update，前面不可以跟上ip地址。
1.1.3TextField
基於上一小節，加入兩個文本字段,用戶接收用戶輸入的信息：

items: [   //添加一個輸入框,用於測試reset方法
    {
        xtype: 'textfield',
        name: 'username',
        fieldLabel: '用戶賬號:',
        allowBlank: false,// 表單項非空,
        emptyText: '請輸賬號',
        blankText: '輸入不能爲空'
    },
    {
        xtype: 'textfield',
        name: 'password',
        fieldLabel: '用戶密碼:',
        allowBlank: false,// 表單項非空
        emptyText: '請輸入密碼',//提示信息
        blankText: '輸入不能爲空',
        inputType: 'password'
    }
]

|
一、屬性
allowBlank：是否允許爲空，默認爲true
blankText：空驗證失敗後顯示的提示信息
emptyText：在一個空字段中默認顯示的信息
grow：字段是否自動伸展和收縮，默認爲false
growMin：收縮的最小寬度
growMax：伸展的最大寬度
inputType：字段類型：默認爲text
maskRe：用於過濾不匹配字符輸入的正則表達式
maxLength：字段允許輸入的最大長度
maxLengthText：最大長度驗證失敗後顯示的提示信息
minLength：字段允許輸入的最小長度
minLengthText：最小長度驗證失敗後顯示的提示信息
1.1.4Button

 {
    xtype: 'button',
    text: '重置',
    scale: large,//大的按鈕,還有small和medium
    enableToggle: true,//有按壓效果
    menu: [ //帶有下拉列表
        {text: 'Item 1'},
        {text: 'Item 2'},
        {text: 'Item 3'},
        {text: 'Item 4'}
    ],
    handler: function () {
        //  alert('你點擊了重置按鈕');
    },
    listeners: {//監聽多個事件
        click: function () {
            // this == the button, as we are in the local scope
            this.setText('I was clicked!');
        },
        mouseover: function () {
                if (!this.mousedOver) {
                this.mousedOver = true;
         alert('You moused over a button!\n\nI wont do this again.');
            }
        }
    }
}

1.1.5登錄界面
通過一個登陸界面把前面的內容串起來:
//創建一個表單

const form = Ext.create('Ext.form.Panel', {
    title: '用戶登錄',
    width: 300,
    height: 300,
    buttonAlign: 'center',
    // url: 'http://localhost:8080/request/login',
    items: [   //添加一個輸入框,用於測試reset方法
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: '用戶賬號:',
            allowBlank: false,// 表單項非空,
            emptyText: '請輸賬號',
            blankText: '輸入不能爲空'
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: '用戶密碼:',
            allowBlank: false,// 表單項非空
            emptyText: '請輸入密碼',//提示信息
            blankText: '輸入不能爲空',
            inputType: 'password'
        }, {
            //單選按鈕
            xtype: 'radiogroup',
            fieldLabel: '選擇您的角色:',
            columns: 2,
            vertical: true,
            items: [
                {boxLabel: '學生', name: 'rb', inputValue: '1'},
                {boxLabel: '老師', name: 'rb', inputValue: '2', checked: true}
            ]
        }],
    buttons: [
        {
            xtype: 'button',
            text: '登錄',
            handler: function () {
                alert("登錄按鈕");
            }
        },
        {
            xtype: 'button',
            text: '重置',
            handler: function () {
                form.getForm().reset();
            }
        }
    ]
});
//創建一個Window窗口作爲容器
const win = Ext.create('Ext.window.Window', {
        // height: 220,
        // width: 220,
        resizable: true, //允許改變大小
        closable: true,   //設置顯示關閉按鈕
        autoShow: true,  //自動顯示
        maximizable: true,//顯示最大化按鈕
        minimizable: true, //顯示最小化按鈕
        buttonAlign: 'center',
        items: form,
        listeners: {
            hide: function () {
                alert('窗口被隱藏');
            }
            ,
            close: function () {
                alert('窗口被關閉');
            }
            ,
            show: function () {
                //  alert('窗口顯示出來');
            }
        }
    });

1.1.6numberfield，hidden,datefield

{
    //數值字段
    xtype: 'numberfield',
    fieldLabel: '請輸入你的身高',
    value: '1.7',
    minValue: '1.0',
    maxValue: '2.5',
    step: '0.1',//每次遞減0.1
    blankText: '請輸入在1.0-2.5範圍的值'
}, {
    //隱藏字段,一般用於向後臺提交數據
    xtype: 'hiddenfield',
    name: 'hidden_field_1',
    value: ''
}, {
    //日期控件
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: '你的生日',
    name: 'birthday',
editable:false,//不允許編輯
    format: 'Y-m-d',//格式化日期顯示
    value: new Date()  // defaults to today
}

1.1.7checkboxfield
基於上一小節,接着添加一個複選按鈕的控件：

 {
    xtype: 'fieldcontainer',//需要使用這個容器來包含複選按鈕
    fieldLabel: '你的愛好:',
    defaultType: 'checkboxfield',
    items: [
        {
            boxLabel  : '寫代碼',
            name      : 'coding',
            inputValue: '1',
            id        : 'checkbox1'
        }, {
            boxLabel  : '還是寫代碼',
            name      : 'coding',
            inputValue: '2',
            checked   : true,
            id        : 'checkbox2'
        }, {
            boxLabel  : '繼續寫代碼',
            name      : 'coding',
            inputValue: '3',
            id        : 'checkbox3'
        }
    ]
}

1.1.8ComboBox
基於上一小節,接着添加內容：

//數據源
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [
        {"abbr": "AL", "name": "羣衆"},
        {"abbr": "AK", "name": "共青團員"},
        {"abbr": "AZ", "name": "黨員"}
    ]
});
//複選按鈕
{
    xtype: 'combobox',
    fieldLabel: '政治面貌:',
    value:'羣衆',//默認值
    store: states,
    queryMode: 'local',//查找數據方式,從本地查找
    displayField: 'name',
    blankText: '請選擇你的政治面貌',
    editable: false//不允許編輯
}

1.1.9文件上傳

Ext.onReady(function () {
    //窗體
    var win = new Ext.Window({
        title: '上傳文件窗口',
        width: 500,
        height: 400,
        resizable: false,
        modal: true,
        closable: true,
        closeAction: 'hide',
    });
    //表單面板
    var addImageForm = new Ext.form.Panel({
        border: false,
        bodyPadding: 5,
        id: 'addImageForm',
        height: 350,
        fieldDefaults: {anchor: '100%'},//填充父窗口
        items: [
            {
                xtype: 'fieldset', title: '圖片上傳',
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: '圖片描述:',
                        name: 'picDisc',
                        id: 'picDisc',
                        allowBlank: false,
                        emptyText: '請輸入圖片的描述信息'
                    }, {
                        xtype: 'filefield',
                        fieldLabel: '上傳圖片',
                        name: 'pic',//名稱需要和服務端保持一致
                        id: 'pic',
                        buttonText: '選擇文件',
                        listeners: {
                            change: function (btn, value, eOpts) {
                                var img = Ext.getCmp('img1');
                                var file = btn.fileInputEl.dom.files[0];
                                var url = URL.createObjectURL(file);
                                img.setSrc(url);
                            }
                        }
                    }
                ]
            }, {
                xtype: 'fieldset',
                title: '圖片預覽',
                layout: 'column',
                items:
                    {
                        xtype: 'image',
                        width: 130,
                        height: 200,
                        id: 'img1'
                    }
            }
        ],
        buttons: [{
            xtype: 'button',
            text: '確認上傳', handler: function () {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        url: '/test/upload',
                        method: 'post',
                        submitEmptyText: false,
                        waitMsg: '請稍等，系統正在幫您添加',
                        success: function (form, action) {
                            Ext.MessageBox.alert('成功', action.result);
                        },
                        failure: function (form, action) {
                            Ext.MessageBox.alert('失敗', action.result);
                        }
                    })
                }
            }
        }, {
            xtype: 'button',
            text: '重置表單', handler: function () {
                this.up('form').getForm().reset();
            }
        }]
    });
    win.items.add(addImageForm);
    win.show();
});