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