ExtJs入門學習

00 ExtJs開始框架

<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../Ext/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />

01 入口

Ext.onReady(function(){
    // 至關於jquery $(function(){}) 入口同樣
})

02 經常使用組件

new 方法來生成一個組件實例

窗體-Window組件

var win = new Ext.Window({
    // 生成一個窗口組件 而後在窗口上添加其餘元素來 完成特定的模塊功能
    title: "窗口",
    width: 100,
    height: 100,
    html: "<div>hello world</div>", //插入html代碼 生成窗體內容
    maximizable: true,
    minimizable: true,
    closable: true,
    items: // 在window上放置其餘元素組件form
    // ... 
});
win.show();//顯示

表單- FormPanel

var form = new Ext.form.FormPanel({
     frame: true,
     title: '表單標題',
     style: 'margin:10px',
     html: '<div style="padding:10px">這裏表單內容</div>',
     items: [textuser,textpwd] //用來放置其餘元素
     buttons: //放置按鈕
});

文本框- TextField

// 初始化標籤Ext:Qtips屬性
Ext.QiuckTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; //提示出現的位置
var text = new Ext.form.TextField({
    width: 200,
    allowBlank: false, // 容許空白
    maxLength: 20,
    //inputType: ''
    name: "username",
    fieldLabel: "用戶名",
    blankText: "請輸入用戶名", // 用來空白提示
    //...
});

按鈕- Button

var confirmClick = function(){};
var btn = new Ext.Button({
    text: "confirm",
    //handler: listeners{}  添加事件方法
    handler: confirmClick
})

數字字段NumberField 隱藏字段Hidden 日期字段DataField

var numberField = new Ext.form.NumberField({});
var hidden = new Ext.form.Hidden({});
var dataField = new Ext.form.DataField({});

單選框RadioGroup 複選框CheckBoxGroup

var radioGroup = new Ext.form.RadioGroup({});
var chkBoxGroup =  new Ext.form.CheckBoxGroup({});

下拉列表- Combobox

//建立數據源[數組數據源]
        var combostore = new Ext.data.ArrayStore({
            fields: ['id', 'name'],
            data: [[1, '團員'], [2, '黨員'], [3, '其餘']]
        });
        //建立Combobox
        var combobox = new Ext.form.ComboBox({
            fieldLabel: '政治面貌',
            store: combostore,
            displayField: 'name',
            valueField: 'id',
            triggerAction: 'all',
            emptyText: '請選擇...',
            allowBlank: false,
            blankText: '請選擇政治面貌',
            editable: false,
            mode: 'local'
        });
        //Combobox獲取值
        combobox.on('select', function () {
            alert(combobox.getValue());
        })

列表和樹 GridPanel TreePanel

var grid = new Ext.grid.GridPanel({});
var tree = new Ext.tree.TreePanel({});
// 這兩個組件主要是用來呈現數據的

其餘

03 小結

• ExtJS是一個很是棒的Ajax框架，能夠用來開發富有華麗外觀的富客戶端應用，能使b/s應用更加具備活力.
• 瞭解認識經常使用的Extjs的組件
• ext-login-demo

04 參考資料

李林峯ExtJs入門教程
extjs-百度百科
extjs是什麼-博客園