关于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); 

} 

},