自由時(shí)飛揚(yáng)

:: 管理

8 Posts :: 0 Stories :: 0 Comments :: 0 Trackbacks

2010年11月26日 #

示例代碼：

Ext.onReady(function(){
	var _panel = new Ext.Panel({
		title:"用戶登陸",
		frame:true,
		width:250,
		height:130,
		layout:"form",
		labelWidth:45,
		defaults:{xtype:"textfield",width:160},
		items:[
			{fieldLabel:"賬號"},
			{fieldLabel:"密碼"}
			],
		buttons:[
		{text:"確定"},
		{text:"取消"}
		]
	});
	
	_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
								tag:"div",
								cls:"contain",
								cn:[
								{tab:"div",cls:"center"}
								]
							},true).child("div"));
	
});

效果圖：

posted @ 2010-11-26 09:20 selfly 閱讀(233) | 評論 (0) | 編輯收藏

ExtJS UI 之 Ext.Window

說明：該組件是實(shí)現(xiàn)窗體化開發(fā)的基礎(chǔ)。

構(gòu)造參數(shù)：

--title:窗體名稱

--minimizable:是否顯示最小化按鈕

--maximizable:是否顯示最大化按鈕

方法：

--show:使得窗口顯現(xiàn)

--hide:使得窗口隱藏

事件:

--hide:當(dāng)隱藏時(shí)觸發(fā)

--show:當(dāng)顯現(xiàn)時(shí)觸發(fā)

Ext.onReady(function(){
	var _window = new Ext.Window({
		title:"用戶登陸",
		frame:true,
		width:250,
		height:130,
		plain:true,
		layout:"form",
		labelWidth:45,
		resizable:false,
		constrain:true,
		closeAction:"hide",
		defaults:{xtype:"textfield",width:160},
		bodyStyle:"padding:5px;",
		listeners:{
			"show":function(){
				alert("窗口顯示");
			},
			"hide":function(){
				alert("窗口隱藏");
			}
		},
		items:[
			{fieldLabel:"賬號"},
			{fieldLabel:"密碼"}
			],
		buttons:[
			{text:"確定"},
			{text:"取消",handler:function(){
					_window.hide();
				}
			}
		]
	});
	
	_window.render(Ext.getBody());
	_window.show();
});

其中plain屬性為true時(shí)，可以強(qiáng)制窗體顏色各背景色變的一樣。

效果圖：

posted @ 2010-11-26 09:20 selfly 閱讀(308) | 評論 (0) | 編輯收藏

ExtJS UI 之訪問容器內(nèi)元素

Ext.onReady(function(){
	var _window = new Ext.Window({
		title:"用戶登陸",
		frame:true,
		width:250,
		height:130,
		plain:true,
		layout:"form",
		labelWidth:45,
		resizable:false,
		constrain:true,
		closeAction:"hide",
		defaults:{xtype:"textfield",width:160},
		bodyStyle:"padding:5px;",
		listeners:{
			"show":function(){
				alert("窗口顯示");
			},
			"hide":function(){
				alert("窗口隱藏");
			}
		},
		items:[
			{fieldLabel:"賬號"},
			{fieldLabel:"密碼"}
			],
		buttons:[
			{text:"確定",handler:function(){
					var _coll = this.ownerCt.ownerCt.items;
//					alert(this.ownerCt.ownerCt.title);
					alert(_coll.first().getValue() + _coll.itemAt(1).getValue());
				}
			},
			{text:"取消",handler:function(){
					_window.hide();
				}
			}
		]
	});
	
	_window.render(Ext.getBody());
	_window.show();
});

當(dāng)然，也可以用Ext.getCmp()來實(shí)現(xiàn)，效果圖：

posted @ 2010-11-26 09:20 selfly 閱讀(153) | 評論 (0) | 編輯收藏

ExtJS UI 之容器內(nèi)組件布局

Ext.onReady(function(){
	var _window = new Ext.Window({
		title:"用戶信息",
		frame:true,
		bodyStyle:"padding:5px",
		width:500,
		height:350,
		plain:true,
		layout:"form",
		defaultType:"textfield",
		labelWidth:60,
		items:[{
			xtype:"panel",
			baseCls:"x-plain",
//			style:"padding:5px",
			layout:"column",
			items:[{
				columnWidth:.5,
				layout:"form",
				labelWidth:60,
				defaultType:"textfield",
				defaults:{width:160},
				baseCls:"x-plain",
				items:[{
					fieldLabel:"姓名"
				},{
					fieldLabel:"年齡"				
				},{
					fieldLabel:"出生日期"				
				},{
					fieldLabel:"聯(lián)系電話"				
				},{
					fieldLabel:"手機(jī)號碼"				
				},{
					fieldLabel:"電子郵件"				
				},{
					fieldLabel:"性別"				
				}]
			},{
				columnWidth:.5,
				layout:"form",
				labelWidth:60,
				baseCls:"x-plain",
				items:[{
					xtype:"textfield",
					fieldLabel:"個(gè)人照片",
					width:165,
					height:180,
					inputType:"image"
				}]
			}]
		},{
			fieldLabel:"身份證號",
			width:400
		},{
			fieldLabel:"具體地址",
			width:400
		},{
			fieldLabel:"職位",
			width:400
		}],
		showLock:false,
		listeners:{
			"show":function(_window){
					if(_window["showLock"] == false){
						_window.findByType("textfield")[7].getEl().dom.src = "default.jpg";
						_window["showLock"] = true;
					}
				}
		},
		buttons:[{
			text:"確定"
		},{
			text:"取消"
		}]
	});
	
	_window.render(Ext.getBody());
	_window.show();
});

效果圖：

posted @ 2010-11-26 09:20 selfly 閱讀(224) | 評論 (0) | 編輯收藏

ExtJS UI 之 Ext.Button

說明：該組件替代了傳統(tǒng)的submit,reset,button等HTML控件。

構(gòu)造參數(shù)：

--text：按鈕上顯示的文字

屬性：

--text：獲得當(dāng)前按鈕上的文字

--minWidth：按鈕的最小寬度

方法：

--setText：設(shè)置按鈕上的名稱

事件：

--click：當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)

示例，在body對象中添加一個(gè)按鈕：

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"確定"
	});
});

這里的Ext.getBody()跟document.body是不相同的，前者是Ext對象，后者是DOM對象，需要把Ext對象進(jìn)行轉(zhuǎn)換后才相等，參考如下等式所列：

document.body == Ext.getBody().dom

renderTo表示將當(dāng)前對象所生成的HTML對象存放進(jìn)指定的對象中

為按鈕定義事件，默認(rèn)為點(diǎn)擊事件：

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"確定",
		handler:function(){
			alert("歡迎你學(xué)習(xí)ExtJS");
		}
	});
});

也可以按如下方法指定具體事件：

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"確定",
		listeners:{
			"click":function(){
				alert("歡迎你學(xué)習(xí)ExtJS");
			}
		}
	});
});

Ext.onReady(function(){
	var _btn = new Ext.Button({
		renderTo:Ext.getBody(),
		text:"確定"
	});
	_btn.on("click",function(){
		alert("歡迎學(xué)習(xí)ExtJs");
	});
});

posted @ 2010-11-26 09:19 selfly 閱讀(301) | 評論 (0) | 編輯收藏

ExtJS UI 之 Ext.form.TextField

說明：該組件代替了傳統(tǒng)的text組件。

屬性：

--fieldLabel：文本框的標(biāo)簽名稱

方法：

--getValue()：得到當(dāng)前文本框的值

Ext.layout.FormLayout:只有在些布局下才能正確顯示文本框的標(biāo)簽名，布局的宿主對象必須是

Ext.Container或者Ext.Container的子類。

在應(yīng)用FormLayout布局時(shí)只要在宿主對象的構(gòu)造參數(shù)中指定layout:”form”即可。

Ext.getCmp(String _id):得到id為_id的組件對象。

示例：

Ext.onReady(function(){
	var _panel = new Ext.Panel({
		renderTo:Ext.getBody(),
		layout:"form",
		labelWidth:50,
		listeners:{
			"render":function(_panel){
				_panel.add(new Ext.form.TextField({
					id:"txt_name",
					fieldLabel:"姓名"
				}));
			}
		}
	});
});

posted @ 2010-11-26 09:19 selfly 閱讀(336) | 評論 (0) | 編輯收藏

ExtJS的一些特性

1、支持命名空間
定義：對于類的組織定義方式
代碼舉例：

Ext.namespace("Ext.dojochina");

和C#里面的命名空間差不多，在Java中類似于包的概念，

Java代碼對照：

package Ext.dojochina;

看以下代碼：

Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = Ext.emptyFn;

上面代碼定義了一個(gè)HelloWorld的空函數(shù)，等同于：

Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = function(){};

可以用以下代碼調(diào)用：

new Ext.dojochina.HelloWorld();

如果去年上面的命名空間聲明行：Ext.namespace("Ext.dojochina"); 則會(huì)出錯(cuò)！

2、類實(shí)例屬性

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype,{name:"name"});

上面的代碼中，name就是Person的一個(gè)屬性，Ext.apply是Ext提供的一個(gè)靜態(tài)方法，主要作用是將后面一個(gè)參數(shù)賦到前面的參數(shù)對象上。

Java對照代碼：

	private String name = "name";

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

可以用以下代碼調(diào)用：

var _person = new Ext.dojochina.Person();

alert(_person.name); //這里還沒有設(shè)值，因此彈出默認(rèn)值name

_person.name = "selfly";

alert(_person.name); //這里已經(jīng)設(shè)過值了，彈出selfly

3、類實(shí)例方法

Ext代碼：

print:function(){
	alert(String.format("姓名：{0},性別{1},",this.name,this.sex));
}

Java對照代碼：

	public void print(){
		System.out.println("姓名:%s,性別%s",this.name,this.sex);
	}

實(shí)例代碼：

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype,{
		name:"",
		sex:"",
		print:function(){
			alert(String.format("姓名：{0},性別:{1}",this.name,this.sex));
		}
	});

var _person = new Ext.dojochina.Person();
_person.name = "張三";
_person.sex = "男";
_person.print();

_person.name = "王五";
_person.sex = "女";
_person.print();

4、類靜態(tài)方法

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;

Ext.dojochina.Person.print = function(_name,_sex){
	var _person = new Ext.dojochina.Person();
	_person.name = _name;
	_person.sex = _sex;
	_person.print();
}

Ext.apply(Ext.dojochina.Person.prototype,{
		name:"",
		sex:"",
		print:function(){
			alert(String.format("姓名：{0},性別:{1}",this.name,this.sex));
		}
	});
	
Ext.dojochina.Person.print("張三","男");
Ext.dojochina.Person.print("王五","女");

5、構(gòu)造方法

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

Ext.dojochina.Person.print = function(_name,_sex){
	var _person = new Ext.dojochina.Person({name:_name,sex:_sex});
	_person.print();
}

Ext.apply(Ext.dojochina.Person.prototype,{
		print:function(){
			alert(String.format("姓名：{0},性別:{1}",this.name,this.sex));
		}
	});
	
Ext.dojochina.Person.print("張三","男");
Ext.dojochina.Person.print("王五","女");

6、支持類繼承

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

Ext.apply(Ext.dojochina.Person.prototype,{
		job:"無",
		print:function(){
			alert(String.format("姓名：{0},性別:{1},角色:{2}",this.name,this.sex,this.job));
		}
	});
	
	
Ext.dojochina.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Teacher,Ext.dojochina.Person,{job:"老師"}); //Teacher繼承Person并給job重新賦值


Ext.dojochina.Student = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{job:"學(xué)生"}); //Student繼承Person并給job重新賦值
	
	
var _teacher = new Ext.dojochina.Teacher({name:"張三",sex:"男"});
_teacher.print();

var _student = new Ext.dojochina.Student({name:"王五",sex:"女"});
_student.print();

7、類實(shí)例方法重寫

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

Ext.apply(Ext.dojochina.Person.prototype,{
		print:function(){
			alert(String.format("姓名：{0},性別:{1}",this.name,this.sex));
		}
	});
	
	
Ext.dojochina.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Teacher,Ext.dojochina.Person,{
	print:function(){
		alert(String.format("{0}是一位{1}老師",this.name,this.sex));
	}
}); //Teacher繼承Person并重寫print方法

var _teacher = new Ext.dojochina.Teacher({name:"張三",sex:"男"});
_teacher.print();

8、支持命名空間別名、類別名

Ext.namespace("Ext.dojochina");

Dc = Ext.dojochina;

Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

PN = Ext.dojochina.Person;

這里把命名空間Ext.dojochina取了一個(gè)別名Dc，對于命名空間別名的命名，最好以大寫字母開頭，

當(dāng)然小寫字母也沒錯(cuò)，但這是一個(gè)良好的編碼規(guī)范。

9、支持事件隊(duì)列

Ext的事件隊(duì)列模式，由Ext.util.Observable類支持。

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(){
	this.addEvents(
		"namechange",
		"sexchange"
	);
}

Ext.extend(Ext.dojochina.Person,Ext.util.Observable,{
		name:"",
		sex:"",
		setName:function(_name){
			if(this.name != _name){
				this.fireEvent("namechange",this,this.name,_name);
				this.name = _name;
			}
		},
		setSex:function(_sex){
			if(this.sex != _sex){
				this.fireEvent("sexchange",this,this.sex,_sex);
				this.sex = _sex;
			}
		}
	});

	
var _person = new Ext.dojochina.Person();

_person.on("namechange",function(_person,_old,_new){
	alert("old name:"+_old+" new name:"+_new);
});

_person.on("sexchange",function(_person,_old,_new){
	alert("old sex:"+_old+" new sex:"+_new);
});

_person.on("namechange",function(_person,_old,_new){
	alert("old name2:"+_old+" new name2:"+_new);
});

_person.setName("張三");
_person.setSex("男");

posted @ 2010-11-26 09:17 selfly 閱讀(138) | 評論 (0) | 編輯收藏

使用ExtJS需要引入的文件

想要使用ExtJS，需要在頁面引入如下文件：

	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
	
	<script type="text/javascript" src="ext/ext-base.js"></script>
	<script type="text/javascript" src="ext/ext-all.js"></script>
	<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>

其中上面的為ExtJS的樣式文件，ExtJS漂亮的外觀均來自于該樣式，下面三個(gè)為Ext的JS文件，最后一個(gè)為ExtJS的簡體中文資源文件，

上面兩個(gè)包含了ExtJS的所有功能，如果不是對ExtJS有深入研究，不是超級用戶的話，個(gè)人推薦直接引入這兩個(gè)文件即可，需要注意前后引入的順序！

posted @ 2010-11-26 09:04 selfly 閱讀(189) | 評論 (0) | 編輯收藏

僅列出標(biāo)題

自由時(shí)飛揚(yáng)

常用鏈接

留言簿

我參與的團(tuán)隊(duì)

隨筆分類

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜