ExtJS基礎知識總結：常用控件使用方式（一）

概述

　　最近一直在做相關ExtJs方面的項目，遇到了ExtJs使用方面的一系列問題，現在將使用技巧做個記錄匯總，以便於下次能夠快速使用。以下都是ExtJs控件的常用方法，做簡單匯總，俗話說，好記星不如爛筆頭，總一天會使用的。

 

基礎控件使用技巧

1、Grid表格操作：獲取Store的數據信息和操作列表行數據

//創建一個grid
var rowPanel = Ext.create('Ext.grid.Panel', {});

//獲取grid對應的Store的數據條數
rowPanel.getStore().getCount();

//將grid第2列設置為不選中
rowPanel.getSelectionModel().deselect(1);

//獲取grid正在使用的選擇模型,將grid全部不選中
rowPanel.getSelectionModel().deselectAll();
rowPanel.getSelectionModel().clearSelections(); //清除勾選

//判斷grid的第一列是否選中
rowPanel.getSelectionModel().isSelected(0);

//將grid的對應的store數據相同arr選中
rowPanel.getSelectionModel().select(arr);

//獲取選中grid數據長度
grid.getSelectionModel().getSelection().length;

//獲取選中grid數據第1行的數據ID
grid.getSelectionModel().getSelection().obj[0].get("Id");
grid.getSelectionModel().getSelection().obj[0].getId();

//store的each使用：
rowPanel.getStore().each(function (record) {
    var operationIdAll = record.data.Id;//獲取數據ID
    //處理邏輯
});

//獲取store的index為1的數據id
rowPanel.getStore().getAt(1).data.Id;

//移除所有數據
rowPanel.getStore().removeAll()

2、設置控件的值setValue：

//發票類型
var invKind: Ext.data.IStore = ({
    fields: ["name", "id"],
    data: [
        { name: "全部", id: "0" },
        { name: "啟用", id: "Ordinary" },
        { name: "禁用", id: "Special" }
    ]
});
items: [{
            flex: 0.2,
            xtype: "combobox",
            store: invKind,
            displayField: "name",   //顯示出來的是name 
            valueField: "id",      //值是id
            fieldLabel: " 啟用狀態",     //label
            editable: false,        //不可編輯
            id: "invkind",         //id
            labelWidth: 80
        }
]       
//設置第一項選中
invkind對應的數據源自動加載數據，之后設置0
Ext.getCmp("invkind").setValue("0");

3、ExtJS異步請求Ajax

/*************************************Ext Ajax數據請求*****************************/
 Ext.MessageBox.confirm("提示", "你確定要禁用嗎？", 
 function (btn) {
    if (btn == "yes") {
        Ext.Ajax.request({
            url: '/User/userEnable',
            method: "POST",
            params: {
                userID: ids,
                isDisabled: '禁用'
            },
            waitMsg: '正在啟用數據...',
            waitTitle: '提示',
            success: function (reps) {
                Ext.MessageBox.alert('提示', '禁用成功！');               
                store.load();
            },
            failure: function (reps) {
                Ext.MessageBox.alert("提示", '禁用失敗！');
            }
        });
    }
});

4、Form表單提交

/**********獲取Form數據,提交*****************************/
function saveUser_ajaxSubmit4() {
 new Ext.form.BasicForm('userForm').submit( {
      waitTitle : '請稍后...',
      waitMsg : '正在保存用戶信息,請稍后...',
      url : 'user_save.action',
      method : 'post',
      success : function(form, action) {
       alert(action.result.msg);
      },
      failure : function(form, action) {
       alert(action.result.msg);
      }
 });
}

/**********獲取Form數據,重置值*****************************/
 formPanel_ResetPwd.form.reset();

5、ExtJs彈窗等待

//彈窗等待

Ext.get("btn5").on("click", function () {
    Ext.MessageBox.wait("正在處理，請稍候...", "等待");
    Ext.defer(function () {
        Ext.MessageBox.close();
    }, 3000);
});

6、checkboxgroup的使用：change事件監控

{
    xtype: "checkboxgroup",
    id:"cbgsmdetailmerge",
    margin: '0 0 0 15',
    width: 220, 
    fieldLabel: "狗子",
    style: 'color:red;',
    columns: 1,
    //flex: 1,
    items: [
        {
            boxLabel: "寵物狗", id: "cbsmproductinfo", name: "cbsmproductinfo", inputValue: "1", checked: true, listeners: {
                change: function (v, v1, v2) {
                    alert(v1);
                }
            } }
    ]                
}
, {
    xtype: "checkboxgroup",
    id: "cbgsmordermerge",
    fieldLabel: "熊貓",
    columns: 3,
    width: 450,
    style: 'color:red;',
    //flex: 1,
    items: [
        { boxLabel: "熊貓1", id: "cbsmcustomer", name: "cbsmcustomer", inputValue: "1", checked: true },
        {
            boxLabel: "熊貓2", id: "cbsmproducttax", name: "cbsmproducttax", inputValue: "1", checked: true
        },
        {
            boxLabel: "熊貓3", id: "cbsmproductline", name: "cbsmproductline", inputValue: "1", checked: false
        }                    
    ]
    , listeners: {
        change: function (v) {
            var r = v.getChecked();                      
            for (var i = 0; i < r.length; i++)
            {
                if (r[i].name == "cbsmproducttax")
                {
                    Ext.getCmp("cbsmcustomer").setValue("1");
                }
                if (r[i].name == "cbsmproductline") {
                    Ext.getCmp("cbsmcustomer").setValue("1");
                }
            }                       
        }
    }
}