extjs几种常用方法

1，提交

　　这种情况一般用于登录界面，也在表单提交应用比较多，大多是一个Button的提交事件，代码为：

var loginForm =........;
if (loginForm .form.isValid()) {
var params = loginCenter.getForm().getValues();
console.log("params= %o",params);//一般这里打个log看看提交的参数
loginForm .getForm().submit({
params:params,
waitTitle : "请稍候",
waitMsg : '正在登录......',
url : 'LoginAction.do',
success : function(form, action) {
　　　//登录成功操作
},
failure : function(form, action) {
//登录失败操作
console.log("login failure action %o",action);//这个就可以看到为什么登录失败
},
　 });
}

2，请求request

　　这种多用于请求少量数据，或者删除操作等，跟submit的区别就是，只要request接收到从服务器返回的结果，都是走success，不管返回的值是什么，代码为：

Ext.Ajax.request({
url: "deleteAction.do",
success: function(response) {
　　//一般都会请求成功，请求回来的数据都是在response.responseText里面的
}，
failure:function(response){
//一般失败都是网络原因
}
});

3.数据store

常用的应该分为两种，一种是treeStore树形数据,另一种就是GridStore表格数据,

首先树形数据treeStore代码:

　　树形又分两种，一种是分级加载，一种是全部加载，分级加载，是点击一个节点，然后将这个节点，传送给服务端，由服务端，根据节点加载数据，主要用于层级结构比较多，数据量比较大的情况；全部加载就是一次性将整个树形数据都获取过来，用于小型树。

　　首先看分级加载：

Ext.define('UMS.data.MyTreeData.Store', {
extend: 'Ext.data.TreeStore',
nodeParam:'treeId',//整个参数的意思是，将节点的id，保存的变量命,用于服务端解析
autoLoad:true,
clearOnLoad:true,
proxy:{
type:'ajax',
url:'getTreeStore.do',//获取数据的action
reader:{
type:'json'
root :'children',//不显示root节点
}
},
root:{
id:"root_node"//根节点的id值，整个这里的意思是这个id是String不是Int
}
});

全部加载：看过上面那个，这个就简单多了

Ext.create('Ext.data.TreeStore', {
expanded: true,
clearOnLoad:true,
proxy:{
type:'ajax',
url:'getTreeStoreAction.do',
reader:{
type:'json',
root :'children'
}
}

});

接着是GridStore,表格数据，一般数据比较多的时候，都是需要分页的，所以，连同分页控件，一起写上了，代码：

var itemsPerPage = 20;//这个是每页显示的条数，根据实际情况定
Ext.define('UMS.data.GridStore', {
extend: 'Ext.data.Store',
autoLoad:{start:0,limit:itemsPerPage},
fields: ['id','username','name','email',],
pageSize:itemsPerPage,//每页大小
proxy:{
type:'ajax',
url:'getGridStoreAction.do',
reader:{
type:'json',
root:'items',//这个是服务端返回数据的跟节点
totalProperty:'totalSize'//这个是服务端返回数据，表示一共有多少条
}
},
sorters: [{
property: 'username',//表格的内容默认根据此列排序
direction: 'ASC'//升序
}]
});

4 combox下拉框中为一个树或者panel：

Ext.define('UMS.TreeComboBox',{
extend : 'Ext.form.field.ComboBox',
alias: 'widget.liangzitreecombo',
store : new Ext.data.ArrayStore({fields:[],data:[[]]}),//这个不用改
editable : false,
resizable:false,
readOnly:false,
editable:false,
_idValue : null,//这条跟下面这条是自己加的属性，为这个新控件的id和text
_txtValue : null,
initComponent : function(){
//初始化的时候用到，比较关键，就是要把哪个tree放进来
var combo = this;
this.callParent(arguments);
this.treeRenderId = Ext.id();

//必须要用这个定义tpl
this.tpl = new Ext.XTemplate('<tpl for="."><div style="height:100' + 'px;"><div id="' + this.treeRenderId+ '"></div></div></tpl>');
//这个就是我们放进去的tree了
var treeObj = new Ext.tree.Panel({
border : false,
height : 250,
width : 500,
autoScroll : true,
id:'parentGroupTree',
rootVisible: false,
store : Ext.create('Ext.data.TreeStore', {
expanded: true,
clearOnLoad:true,
proxy:{
type:'ajax',
url:'getTreeStoreAction.do',
reader:{
type:'json',
root :'children'
}
}
})
});
//定义树形的点击事件，主要就是框体内文字的显示，以及收回面板
treeObj.on('itemclick',function(view,rec){
if(rec){
combo._idValue = rec.get('id');
combo.collapse();
}
});
treeObj.on('beforeitemexpand',function( node, eOpts ){
//这里是树展示前的一些准备
});
//这里是必要的，不要改
this.on(
'expand',function(){
if(!treeObj.rendered&&treeObj&&!this.readOnly){
Ext.defer(function(){
treeObj.render(this.treeRenderId);
},300,this);
}
});
},
getValue : function(){//获取id值
return this._idValue;
},
getTextValue : function(){//获取text值
return this._txtValue;
},
setLocalValue : function(txt,id){//设值
this._idValue = id;
this.setValue(this._txtValue = txt);
}
});