關於extjs頁面載入完後調用的信息

本文目錄一覽：

• 1、ExtJS 中JS頁面如何調用另外一個XX.jsp頁面javascript中的方法?
• 2、extjs 整個頁面載入完是不是一個事件，如果是是什麼事件
• 3、EXTJS怎麼讓Window先載入出來然後再載入FormPanel
• 4、extjs函數調用方法
• 5、extjs 在頁面載入完成後怎麼給column加上renderer

ExtJS 中JS頁面如何調用另外一個XX.jsp頁面javascript中的方法?

ExtJS 中JS頁面是不可以跨jsp頁面去調用jsp頁面的js方法的。需要把js函數寫到extjs才可以調用。

DJSLoader=function(){

this.init=function(opt){};

this.JS=new Array();

this.loadJS=function(file,path){

path=path?path:”;

var script=document.getElementsByTagName(“script”);

var i,j;

for (i=0,j=script.length;ij;i++){

if (script[i].getAttribute(“src”) == (path+file)){

return;

}

}

var _script=document.createElement(“script”);

_script.type=”text/javascript”;

_script.src=”test.js”;

var st=new Object();

st.file=file;

st.path=path;

st.loaded=false;

this.JS.push(st);

_script.onload=function(obj){

obj.setJSStatus(file,true,path);

}.createDelegate(_script,[this]);

_script.onreadystatechange=function(obj){

if ( this.readyState==’loaded’ || this.readyState==’complete’ ) {

obj.setJSStatus(file,true,path);

}

}.createDelegate(_script,[this]);

document.getElementsByTagName(“head”)[0].appendChild(_script);

};

以上方法調用完成後，要調用的js文件已經載入到當前extjs頁面了，那麼就可以直接調用了。

extjs 整個頁面載入完是不是一個事件，如果是是什麼事件

extjs為了優化性能會在頁面完成渲染之前儘可能多的完成相關DOM的構建和樣式更新。

整個頁面載入完（包括所有資源）是有個事件，這之後的更新DOM的操作會導致瀏覽器重排版，會影響效率。

具體請參考

EXTJS怎麼讓Window先載入出來然後再載入FormPanel

先創建window,然後在items中創建formPanel,然後調用window的show()方法。

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 在頁面載入完成後怎麼給column加上renderer

用 columns model  的.setRenderer方法 就可以  在 grid的onRenderer 事件發生時調用

這是一段代碼 在右鍵點擊時經整列的背景色改變

var rightClick = new Ext.menu.Menu({ 

    items: [ 

{ 

text: ‘選中這一列’ ,

itemId:”sele_col_btn”,

iconCls:’btn-ok’,

disabled:(cellIndex==cur_selected_column_index),

handler:function(){ 

    if (cellIndex3){return;}

var cur_columns=grid.getColumnModel();

if (cellIndex==cur_selected_column_index){

cur_columns.setRenderer(cellIndex,function(value,metadata){

return value;

});

cur_selected_column_index=-1;// 重置位未選中

grid.store.loadData(items_arr); 

return;

}

for (var i=3;isize_no_arr.length+3;i++){

cur_columns.setRenderer(i,function(value,metadata){

return value;

});

}

cur_columns.setRenderer(cellIndex,function(value,metadata ){

metadata.css=”x-grid-seleted-green”;

return value;

});

cur_selected_column_index=cellIndex;

grid.store.loadData(items_arr); 

} 

},