⑴ 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);
這里的函數名並不需要加括弧,第一個參數是要調用的方法,第二個是作用域,一般寫此對象名即可。