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