⑴ Extjs4 获得store的数据
要获取store里边的数据的方法是在太多啦
varmyStore=Ext.create('MyExtJS.store.UserStore');
//idx是该记录在store中的index,从0开始
var变量=myStore.getAt(idx).get('字段名');
而且,在ext的组件中还有很多方法,他已经把store的record当作变量给你传过来了,用起来相当方便,例如grid的监听事件
lisenters:{
cellclick:function(g,t,i,r){
//这里的r就是表格被选中行的记录
}
}
store还有很多 方法 可以取出其中的数据,具体内容,查阅extjs的官方api,搜索store即可!
纯手敲,希望对lz有帮助~
⑵ extjs函数调用方法
一、获取元素(Getting
Elements)
1.Ext.get
var
el
=
Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存
2.
Ext.fly
var
el
=
Ext.fly('myElementId')//不需要缓存。
注:享元模式(Flyweight
Design
Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.Ext.getDom
var
elDom
=
Ext.getDom('elId');
//
依据id来查dom节点
var
elDom1
=
Ext.getDom(elDom);
//
依据dom节点来查dom节点
二、CSS元素
4.addClass
Ext.fly('elId').addClass('myCls');
//
加入元素的'myCls'的样式
5.radioClass
Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边(siblings)节点上的同名样式。
6.removeClass
Ext.fly('elId').removeClass('myCls');
//
移除元素的样式
7.toggleClass
Ext.fly('elId').toggleClass('myCls');
//
加入样式
Ext.fly('elId').toggleClass('myCls');
//
移除样式
Ext.fly('elId').toggleClass('myCls');
//
再加入样式
8.hasClass
if
(Ext.fly('elId').hasClass('myCls'))
{//判断是否已加上这个样式
//
是有样式的
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA',
'myClsB');//替换样式
11.getStyle
var
color
=
Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
var
zIndx
=
Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。
12.setStyle
Ext.fly('elId').setStyle({
display
:
'block',
overflow
:
'hidden',
cursor
:
'pointer'
});//设置元素的样式,也可以用一个对象参数包含多个样式。
13.getColor
Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色
14.setOpacity
Ext.fly('elId').setOpacity(.45,
true);//设置元素的透明度。
15.clearOpacity
Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置
⑶ extjs怎么获取后台的数据或者是变量。。。求大神速回
1. 使用form表单提交
使用表单提交是调用了表单的submit方法,其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。
var myform = Ext.create('Ext.form.Panel',{undefined
defaultType: 'textfield',
items:[{undefined
fieldLabel : 'Name',
name : 'name'
},{undefined
fieldLabel: 'Gender',
name : 'gender'
},{undefined
fieldLabel : 'Age',
name: 'age'
}],
buttons: [{undefined
text : 'load',
handler : function(){undefined
this.up('form').getForm().submit({undefined
url: '/request/userinfo',
method : 'POST',
success : function(form, action){undefined
console.log(form);
Ext.Msg.alert('title', 'load success');
});
}]);
2. 使用Ajax异步提交
将上述handler方法中的内容换成一下代码即可。在Ajax的request方法中是一个配置对象,其配置参数包括url,type,params。其中params表示要提交的参数,在此例中是从form表单中通过getValues()方法获得的。该种方式也能将参数一JSON的方式提交到后台,与一个对象匹配。
var values = this.up('form').getForm().getValues();
Ext.Ajax.request({undefined
url:'/request/userinfo',
headers : {undefined'userHeader': 'userMsg'},
type:'POST',
params:values,
success:function(response){undefined
var data = response.responseText;
console.log(data);
console.log("success");
},
});
3. 使用Ext.data.Store
在项目中经常需要通过提交一些数据来从后台获取相应的信息。例如,在表单中输入某个人的id和name就可以查出它的相关信息并在前台显示。一个关于extjs的例子如下:
//data Model
Ext.define('User',{undefined
extend: 'Ext.data.Model',
fields: [{name:'name',type:'string'},
{name:'gender',type:'string'},
{name:'age',type:'string'}
]
});
var userStore = Ext.create('Ext.data.Store',{undefined
model: 'User',
pageSize: 20,
// autoLoad : true,
proxy: {undefined
type : 'ajax', //提交数据的方式
url : '/request/userinfo',
reader : { //以json的形式读取将要提交的数据
type : 'json',
root : 'resultList'
},
writer : {undefined
type : 'json'
},
actionMethods : {undefined
create : 'POST'
}
},
});
//grid Panel
Ext.create('Ext.grid.Panel',{undefined
store: userStore,
columns: [
{header : 'Name', dataIndex : 'name'},
{header : 'Gender', dataIndex : 'gender'},
{header : 'Age', dataIndex : 'age'}
],
height: 200,
width: 400,
renderTo: 'div2'
});
//form Panel
var myform = Ext.create('Ext.form.Panel',{undefined
defaultType: 'textfield',
items:[{undefined
fieldLabel: 'Name',
name: 'name'
},{undefined
fieldLabel: 'Gender',
name: 'gender'
},{undefined
fieldLabel : 'Age',
name : 'age'
}],
buttons: [{undefined
text: 'load',
handler: function(){undefined
var values = this.up('form').getForm().getValues();
console.log(values);
userStore.proxy.extraParams=values;
userStore.loadPage(1);
}
}
});
在handler方法中获取form表单的参数后,赋值给userStore.proxy.extraParams,然后调用userStore.loadPage(1)。调用loadPage()方法时,会委托给proxy对象去后台获取数据。所以对proxy的配置是核心。使用这个方式从后台获取数据时,后台接口返回的对象应该包括一个List字段,list中包含所需要的具体信息。比如
@ReponseBody
public UserInfoResp getUserInfo(User user) {undefined
}
UserInfoResp应该像这样有一个List字段
class UserInfoResp {undefined
List<User> resulltList;
}
⑷ extjs 初始化函数 中的 this.callParent(arguments);类似于继承么就是继承父类的对应的初始化函数
主要是为了覆盖父类的同名方法...但是又需要父类方法同样的动作的时候...
//比如一个grid父类
Ext.define("baseGrid",{
extend:"Ext.grid.Panel",
initComponent:function(){
//这里设置表格的工具栏,用一个createDockedItems方法生成
this.dockedItems=this.createDockedItems();
this.callParent();
},
//这里是生成表格的工具栏,默认的只有一个分页栏
createDockedItems:function(){
return[{
xtype:"paging",dock:"bottom",store:this.store
}]
}
});
//然后grid1继承这个类
Ext.define("grid1",{
extend:"baseGrid",
//这里grid1不仅有分页栏,还需要有添加,修改,删除的工具栏
createDockedItems:function(){
vartbs=this.callParent();//这里调用callParent,就是父类的方法,返回父类方法中的内容,就是那个分页栏
//这里添加一个新的工具栏,包括添加修改按钮
tbs.push({xtype:"toolbar",items:[
{text:"添加"},
{text:"修改"}
]});
returntbs;
}
});
//其实主要作用是为了覆盖,而同时又不是全部都覆盖,所以有了这个方法
⑸ Extjs 复选框树,如何记录已经checked的id
方法一:监听树checkchange事件,把已选的加入到一个数组里,把反勾选的从数组中移除~
方法二:在你需要获取已勾选树的节点时,遍历这颗树,去判断如果是勾选的,记录到数组中。
遍历树可以用node.parentNode或者node.childNodes,详见api吧
判断方法:node.getUI().checkbox.checked //true是选中,false是未选中
⑹ extjs带复选框的树,如何在后台获取选中的值,想要获取节点的id
没法从后台直来接获取前台extjs树上的自情况。但是可以从前台获取树选中的情况,传给后台,后台就知道了~~~
前台获取选中树的节点的方法:
方法1.在树上做个listeners,监听树的click事件(在click中选中节点),或者监听节点的checkchange事件,然后在外面定义一个全局数组,每次记录点击选中的节点id(数组的添加和移除操作),或者在这里直接向后台提交选中的节点id(事件里的参数有节点,直接能拿id)
方法2.需要像后台提交树的值的时候,获取树的节点,然后遍历节点,获取所有选中的节点id,这个你可以查下api,treenode,里面好多方法都可以用的~只不过该方法,如果树的深度比较大时或者不知道有多深时,需要使用递归方法来做,比较耗费
⑺ extjs怎么自定义函数
转:
Ext JS自定义函数,令人崩溃的语法~
项目中有一段一直没看懂,貌似是关于Ext JS中自定义函数的:
Ext.ux.MessageBox = function() {
var msgCt;
function createBox(t, s, data, i) {
…………
}
return {
…………
};
}();
函数(createBox)之后,没有逗号,也没有分号,直接来了个return……。我一下子就晕了。手头能找到的两本书中都没有相应语法的介绍。今天偶然看到某高人的文章,顿时豁然开朗。最后大括号后面又来一对儿括号,这部分还是没有搞明白,以后再来研究吧~转载如下供查阅:
EXTJS的自定义函数,以下语句可创建一个函数:
Ext.Login=function(){
function IsLogin(){
……
}
return{
init:function(){
IsLogin();
},
Login:function(){
……
}
}
刚开始时让我比较郁闷的是这种JS里的函数调用机制,以上代码里,将创建一个名为Ext.Login()的对象,应该相当于一个类的意思吧,然后可在其里面写其他相关的方法。
在return里的为公有方法,这里面的方法可给外部程序调用(如在HTML文件里用),而在return以外的代码是其私有方法,只能在Ext.Login()这个对象里调用
如需要在其他页面调用里面的Login()方法,可直接写
<input id="login" onclick="Ext.Login().Login()" />
如果需要在页面加载时就调用,一般只需直接用EXTJS里的方法即可实现:
Ext.onReady(Ext.Login.init, Ext.Login);
这里的函数名并不需要加括号,第一个参数是要调用的方法,第二个是作用域,一般写此对象名即可。