JavaScript開發指南之Extjs使用技巧

JavaScript開發指南之Extjs使用技巧。

Ext.onReady(function(){

//創建一個新的組件

Ext.create('Ext.window.Window',{

title:'nihao',

height:400,

width:200,

layout:'fit',

constrain:true,//限制窗口不超出瀏覽器

renderTo:Ext.getBody()//新創建的組件渲染到什麼位置

}).show();

});

ConstraintHeader:不允許標題的窗口超出瀏覽器邊界.

Modal:指定是不是模態窗口

autoScroll:滾動條

icon:通標(加圖片路徑)

iconCls:圖片樣式

draggable:false,//不允許拖拽

resizable:false,//不允許改變大小

closable:false,//不顯示關閉按鈕

items:[//添加子組件

{

xtype:'panel',

width:'40%',

height:120,

html:'我是面板'

},

{

xtype:'button',

text:'按鈕',

handler:function(btn){

alert(btn.text)

}

}],

tbar://表示向當前組件中的top位置添加工具條

[

{},

{}

],

Bbar:[{},{}]//在窗體底部添加狀態欄

lbar:[{},{}]//在窗體左部添加狀態欄

rbar:[{},{}]//在窗體右添加狀態欄

fbar:[{},{}]//在窗體最最底部添加狀態欄

凡是組件都會有up與down方法分別是查找父組件與查找子組件

Ext.getCom(‘id’)//通過id獲取組件

xxx.ownerCt取這一級元素的上一級元素

Ext.onReady(function(){

//ex003:用windowGroup對象去操作多個window窗口

var wingroup = new Ext.WindowGroup();

for(var i = 1 ; i <=5;i++){

var win =Ext.create('Ext.Window',{

title:'第' + i + '個窗口' ,

id:'win_' + i ,

width:300 ,

height:300 ,

renderTo:Ext.getBody()

});

win.show();

wingroup.register(win); //把窗體對象註冊給ZindexManger

}

var btn1 =Ext.create('Ext.button.Button',{

text:'全部隱藏' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.hideAll(); //隱藏所有被管理起來的window組件

}

});

var btn2 = new Ext.button.Button({

text:'全部顯示' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.each(function(cmp){

cmp.show();

});

}

});

var btn3 = new Ext.button.Button({

text:'把第三個窗口顯示在最前端' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.bringToFront('win_3');//把當前的組件顯示到最前端

}

});

var btn4 = new Ext.button.Button({

text:'把第五個窗口顯示在最末端' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.sendToBack('win_5'); //把當前的組件顯示到最後

}

});

});

Config:配置項就是配置當前配置項的屬性內容,並且會自動加上get與set 方法,

Ext中定義一個類

Ext.define(‘Person’,{

Config://用config定義參數這樣的話就自動生成瞭get與set 方法

{

Name:’dfas’,

Age:’ds’

}

Say:function(){

Alert(我是方法)

}

Constructor:function(config){

Var me=this

Me.initConfig(config);//通過構造函數初始化參數

}

});

Ext底層繼承得javaScript實現

Ext靜態塊

Ext:requires,uses,singlon

Ext.apply&Ext.applyIf

Ext方法覆蓋

//Ext對原生javascript對象的擴展

//提示信息

/* Ext.MessageBox.alert('我是標題!' , 'Hello World!' , function(){

console.info(this);

alert('我是回調函數!');

} ,this);

Ext.Msg.alert('提示信息','ExtJS!!!');*/

//詢問框

Ext.Msg.confirm('提示信息','確認刪除該條記錄麼?',function(op){

// yes on

if(op == 'yes'){

alert('確認瞭!');

}else{

alert('取消瞭!');

}

});

//輸入框

//String title, String msg,[Function fn], [Object scope], [Boolean/Number multiline], [String value]

Ext.Msg.prompt('我是標題!','請輸入姓名:' , function(op, val){

//op ok cancel

console.info(op);

console.info(val);

} , this , true , '張三');

//等待框也就是我們所說的進度條

Ext.Msg.wait('提示信息','我是內容' ,{

interval:400, //循環定時的間隔

duration:2000, //總時長

increment:5, //執行進度條的次數

text:'更新中,請稍後…', //進度條上的文字

scope:this,

fn:function(){

alert('更新成功!');

},

animate:true //更新渲染時提供一個動畫效果

});

//show方法

Ext.Msg.show({

title:'我是自定義的提示框!!' ,

msg:'我是內容!!' ,

width:300 ,

height:300 ,

buttons:Ext.Msg.YESNOCANCEL ,

icon:Ext.Msg.WARNING // ERROR INFO QUESTIONWARNING

});

// 第二個作用: 通常用於遞歸操作

// arguments.callee 表示引用當前函數本身

function fact(number){

if(number <= 1){

return 1 ;

}else{

returnnumber*arguments.callee(number-1);

}

};

// This 關鍵字在javascript裡的使用

//this關鍵字總是指向調用者,誰調用函數,this就指向誰

var x = 5; // window.x = 5 ;

function test(){

alert(this.x);

};

test.x = 10;

window.test();

// call apply 主要作用是綁定作用域

var color = 'red';

var obj = {color:'yellow'};

//

function showColor(x,y,z){

alert(x+y+z);

alert(this.color);

};

//// call、apply 綁定一個函數,到你指定的作用域內執行

showColor.call(obj,10,20,30);

showColor.apply(obj,[2,3,4]);

//定義瞭一個js的類

var Person = function(name , age){

this.name = name ;

this.age = age ;

// private

var _sex = '男'; //js的私有屬性

this.getSex = function(){

return _sex ;

};

this.setSex = function(sex){

_sex= sex ;

};

};

//單體模式: 閉包單體

var SXT = (function(){

var Array = {

each:function(){

alert('each…');

}

};

return {

arrayEach:function(){

Array.each();

}

};

})();

SXT.arrayEach();

Ext.onReady(function(){

//Ext.create方法相當於創建一個實例對象

Ext.create('Ext.window.Window',{

title:'我的第一個組件,window' ,

width:400, //Number型 也可以是字符串類型 width: '90%'

height:300,

layout:'fit' ,

constrain:true , //限制窗口不超出瀏覽器邊界

modal:true , //設置一個模態窗口

//plain:true ,

icon:'js/extjs/icons/used/browser_window.png',//字符串參數,圖片的路徑

//iconCls:'' , //CSS樣式

x:50,

y:50,

autoScroll:true, //添加滾動條

html:'

我是一個p我是第二個p' ,

constrainHeader:true, //不允許該窗口的title超出瀏覽器邊界

renderTo:Ext.getBody() //新創建的組件渲染到什麼位置

}).show();

});

var btn = Ext.get('btn');//這個元素是經過Ext包裝的一個Ext的Dom對象//alert(btn.dom.value);

btn.on('click',function(){

if(!Ext.getCmp('mywin')){

Ext.create('Ext.window.Window',{

id:'mywin' , //如果你給組件加瞭一個id 那麼這個組件就會被Ext所管理

title:'新窗體' ,

height:300,

width:400,

renderTo:Ext.getBody()//,

//modal:true

}).show();

}

});

//第二種實現

var win = Ext.create('Ext.window.Window',{

title:'新窗體' ,

height:300,

width:400,

renderTo:Ext.getBody(),

closeAction:'hide' //closeAction默認是destroy

});

Ext.get('btn').on('click',function(){

win.show();

});

//ex002 : 在組件中添加子組件 ,並進行一系列針對於組件的操作

//在組件中添加子組件:

var win = new Ext.window.Window({

title:"添加子組件實例" ,

width:'40%' ,

height:400,

renderTo:Ext.getBody(),

draggable:false , //不允許拖拽

resizable:false , //不允許改變窗口大小

closable:false, //不顯示關閉按鈕

collapsible:true , //顯示折疊按鈕

bodyStyle:'background:#ffc; padding:10px;' , // 設置樣式

html:'我是window的內容!!' ,

//Ext items(array) //配置子組件的配置項

items:[{

//Ext的組件給我們提供瞭一個簡單的寫法 xtype屬性去創建組件

xtype:'panel',

width:'50%',

height:100,

html:'我是面板'

},

new Ext.button.Button({

text:'我是按鈕' ,

handler:function(){

alert('執行!!');

}

})

{

xtype:'button' ,

text:'我是按鈕',

handler:function(btn){

alert('我被點擊瞭');

alert(btn.text);

}

}

]

});

win.show();

var win = new Ext.Window({

id:'mywin' ,

title:'操作組件的形式' ,

width:500,

height:300,

renderTo:Ext.getBody(),

//表示在當前組件的top位置添加一個工具條裡面默認的都是按鈕

tbar:[{ //bbar(bottom)lbar(leftbar) rbar(rightbar) fbar(footbar)

text:'按鈕1' ,

handler:function(btn){

//組件都會有 up、down 這兩個方法(表示向上、或者向下查找) 需要的參數是組件的xtype或者是選擇器

alert(btn.up('window').title);

}

},{

text:'按鈕2' ,

handler:function(btn){

//最常用的方式

alert(Ext.getCmp('mywin').title);

}

},{

text:'按鈕3' ,

handler:function(btn){

//以上一級組件的形式去查找 OwnerCt

//console.info(btn.ownerCt);

alert(btn.ownerCt.ownerCt.title);

}

}]

});

win.show();

//ex003:用windowGroup對象去操作多個window窗口

var wingroup = new Ext.WindowGroup();

for(var i = 1 ; i <=5;i++){

var win = Ext.create('Ext.Window',{

title:'第' + i + '個窗口' ,

id:'win_' + i ,

width:300,

height:300,

renderTo:Ext.getBody()

});

win.show();

wingroup.register(win); //把窗體對象註冊給ZindexManger

}

var btn1 = Ext.create('Ext.button.Button',{

text:'全部隱藏' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.hideAll(); //隱藏所有被管理起來的window組件

}

});

var btn2 = new Ext.button.Button({

text:'全部顯示' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.each(function(cmp){

cmp.show();

});

}

});

var btn3 = new Ext.button.Button({

text:'把第三個窗口顯示在最前端' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.bringToFront('win_3'); //把當前的組件顯示到最前端

}

});

var btn4 = new Ext.button.Button({

text:'把第五個窗口顯示在最末端' ,

renderTo:Ext.getBody(),

handler:function(){

wingroup.sendToBack('win_5'); //把當前的組件顯示到最後

}

});

//在Ext中如何去定義一個類: Ext.define(className , properties , callback)

Ext.define('Person',{

//這裡是對於這個類的一些配置信息

//config屬性就是配置當前類的屬性內容,並且會加上get和set方法

config:{

name:'z3' ,

age:20

},

//自己定義的方法

say:function(){

alert('我是方法…');

},

//給當前定義的類加一個構造器 ,目的就是為瞭初始化信息

constructor:function(config){

var me = this ;

// for(varattr in config){

// alert(attr+ " : " + config[attr]);

// }

me.initConfig(config); // 真正的初始化傳遞進來的參數

}

});

發佈留言