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");
                }
            }                       
        }
    }
}