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

extjs几种常用方法的更多相关文章

  1. Java中从控制台输入数据的几种常用方法

    Java中从控制台输入数据的几种常用方法 一.使用标准输入串System.in //System.in.read()一次只读入一个字节数据,而我们通常要取得一个字符串或一组数字 //System.in ...

  2. jQuery验证元素是否为空的两种常用方法

    这篇文章主要介绍了jQuery验证元素是否为空的两种常用方法,实例分析了两种常用的判断为空技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给 ...

  3. 在Quartus II中分配管脚的两种常用方法

    在Quartus II中分配管脚的两种常用方法 示范程序 seg7_test.v 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /* * ...

  4. NSString的几种常用方法

    NSString的几种常用方法   要把 “2011-11-29” 改写成 “2011/11/29”一开始想用ios的时间格式,后来用NSString的方法搞定. [string stringByRe ...

  5. Java更新XML的四种常用方法简介

    本文简要的讨论了Java语言编程中更新XML文档的四种常用方法,并且分析这四种方法的优劣.其次,本文还对如何控制Java程序输出的XML文档的格式做了展开论述. JAXP是Java API for X ...

  6. vue——props的两种常用方法

    vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...

  7. C#程序实现软件开机自动启动的两种常用方法

    C#/WPF/WinForm/.NET程序代码实现软件程序开机自动启动的两种常用方法函数的示例与实例带详细注释 方法一:将软件的快捷方式创建到计算机的自动启动目录下(不需要管理员权限) 1.必要引用 ...

  8. [C#.Net]启动外部程序的几种常用方法汇总

    本文汇总了C#启动外部程序的几种常用方法,非常具有实用价值,主要包括如下几种方法: 1. 启动外部程序,不等待其退出. 2. 启动外部程序,等待其退出. 3. 启动外部程序,无限等待其退出. 4. 启 ...

  9. js函数调用二种常用方法的例子

    js中函数调用的两种常用方法. 一个js函数 function test(aa){ window.alert("你输入的是"+aa); } 方法一:直接调用 test(" ...

随机推荐

  1. 记录平时code点滴,这次是通过一张充满异样字符的表,对数据表中的每一列进行清理,比double quotation的issue难多了!

    需要提供对象: 一张需要被替换字符的表. 通过游标结合动态SQL对某一张特定表的所有列进行更新,主要是对其列值的异常字符处理. dbo.Characters_need_to_be_replaced c ...

  2. Java文件操作二:File文件的方法

    一.文件的判断方法 判断方法 .boolean canExecute()判断文件是否可执行 .boolean canRead()判断文件是否可读 .boolean canWrite() 判断文件是否可 ...

  3. 嵌入式web server——Goahead启用SSL

    前言 之前已经介绍过如何把goahead移植到linux平台,现在再介绍goahead应用SSL的一些关键要点.因为此博文是继承于上一篇关于移植的博文,有不明白的请先回看.移植篇点这里. 移植环境 g ...

  4. 读书笔记之 - javascript 设计模式 - 享元模式

    本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把 ...

  5. 使用APPLICATION制作缓存,转存一下,有一段写的还可以。

    public sealed class CacheManager   {   private HttpApplicationState appPool = null;   /// <summar ...

  6. CentOS6.3安装VBoxAdditions

    yum update kernel yum install kernel-devel gcc gcc-c++

  7. 上传图片带预览功能兼容IE和火狐等主流浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. R.Net 用法

    using (REngine engine = REngine.CreateInstance("RDotNet")) { engine.Initialize(); var expa ...

  9. [Linux]命令root与other切换

    切换至root:sudo -i切换至other:su 用户名 

  10. yii2的安装使用

    一.Yii2框架 Yii2框架有基本和高级两种版本,主要区别是高级版已经分好了前台.后台,基本版只有前台 二.归档安装方法 归档安装方发很简单,只需要在官网上下载归档文件后,解压即可使用(但是不使用c ...