bdsm精品捆绑chinese女,欧美亚洲国产一区二区三区,宅男视频免费在线观看视频

ExtJS UI �?Ext.Window

selfly — Fri, 26 Nov 2010 01:20:00 GMT

说明�Q�该�l��g是实现窗体化开发的基础�?/p>

构造参敎ͼ�

--title:�H�体名称

--minimizable:是否昄��最��化按钮

--maximizable:是否昄��最大化按钮

�Ҏ��Q?/p>

--show:使得�H�口昄��

--hide:使得�H�口隐藏

事�g:

--hide:当隐藏时触发

--show:当显现时触发

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("�H�口昄���");
			},
			"hide":function(){
				alert("�H�口隐藏");
			}
		},
		items:[
			{fieldLabel:"账号"},
			{fieldLabel:"密码"}
			],
		buttons:[
			{text:"���定"},
			{text:"取消",handler:function(){
					_window.hide();
				}
			}
		]
	});
	
	_window.render(Ext.getBody());
	_window.show();
});

其中plain属性�ؓtrue�Ӟ��可以强制�H�体颜色各背景色变的一栗��?/p>

效果图：

selfly 2010-11-26 09:20 发表评论

selfly — Fri, 26 Nov 2010 01:20:00 GMT

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("�H�口昄���");
			},
			"hide":function(){
				alert("�H�口隐藏");
			}
		},
		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();
});

当然�Q�也可以用Ext.getCmp()来实玎ͼ�效果图：

selfly 2010-11-26 09:20 发表评论

ExtJS UI �?容器内组件布局

selfly — Fri, 26 Nov 2010 01:20:00 GMT

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:"�q�龄"				
				},{
					fieldLabel:"出生日期"				
				},{
					fieldLabel:"联系电话"				
				},{
					fieldLabel:"手机��L��"				
				},{
					fieldLabel:"电子邮�g"				
				},{
					fieldLabel:"性别"				
				}]
			},{
				columnWidth:.5,
				layout:"form",
				labelWidth:60,
				baseCls:"x-plain",
				items:[{
					xtype:"textfield",
					fieldLabel:"个�h照片",
					width:165,
					height:180,
					inputType:"image"
				}]
			}]
		},{
			fieldLabel:"�w�䆾证号",
			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();
});

效果图：

selfly 2010-11-26 09:20 发表评论

ExtJS UI �?Ext.Button

selfly — Fri, 26 Nov 2010 01:19:00 GMT

说明�Q�该�l��g替代了传�l�的submit,reset,button�{�HTML控�g�?/p>

构造参敎ͼ�

--text�Q�按钮上昄��的文�?/p>

属性：

--text�Q�获得当前按钮上的文�?/p>

--minWidth�Q�按钮的最��宽�?/p>

�Ҏ��Q?/p>

--setText�Q�设�|�按钮上的名�U?/p>

事�g�Q?/p>

--click�Q�当点击按钮时触�?/p>

�C�Z��Q�在body对象中添加一个按钮：

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

�q�里的Ext.getBody()跟document.body是不相同的，前者是Ext对象�Q�后者是DOM对象�Q�需要把Ext对象�q�行转换后才相等�Q�参考如下等式所列：

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

renderTo表示��当前对象所生成的HTML对象存放�q�指定的对象�?/p>

为按钮定义事�Ӟ��默认为点��M��Ӟ��

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"���定",
		handler:function(){
			alert("�Ƣ迎你学习ExtJS");
		}
	});
});

也可以按如下�Ҏ��指定具体事�g�Q?/p>

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"���定",
		listeners:{
			"click":function(){
				alert("�Ƣ迎你学习ExtJS");
			}
		}
	});
});

Ext.onReady(function(){
	var _btn = new Ext.Button({
		renderTo:Ext.getBody(),
		text:"���定"
	});
	_btn.on("click",function(){
		alert("�Ƣ迎学习ExtJs");
	});
});

selfly 2010-11-26 09:19 发表评论

ExtJS UI �?Ext.form.TextField

selfly — Fri, 26 Nov 2010 01:19:00 GMT

说明�Q�该�l��g代替了传�l�的text�l��g�?/p>

属性：

--fieldLabel�Q�文本框的标�{�֐��U?/p>

�Ҏ��Q?/p>

--getValue()�Q�得到当前文本框的�?/p>

Ext.layout.FormLayout:只有在些布局下才能正��显�C�文本框的标�{�֐��Q�布局的宿��d��象必��L��

Ext.Container或者Ext.Container的子�c�R�?/p>

在应用FormLayout布局时只要在宿主对象的构造参��C��指定layout:”form”即可�?/p>

Ext.getCmp(String _id):得到id为_id的组件对象�?/p>

�C�Z��Q?/p>

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:"姓名"
				}));
			}
		}
	});
});

selfly 2010-11-26 09:19 发表评论

selfly — Fri, 26 Nov 2010 01:17:00 GMT

1、支持命名空�?/font>
定义�Q�对于类的组�l�定义方�?br>代码举例�Q?/p>

Ext.namespace("Ext.dojochina");

和C#里面的命名空间差不多�Q�在Java中类��g��包的概念�Q?

Java代码对照�Q?/p>

package Ext.dojochina;

看以下代码：

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

上面代码定义了一个HelloWorld的空函数�Q�等同于�Q?/p>

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

可以用以下代码调用：

new Ext.dojochina.HelloWorld();

如果��d��上面的命名空间声明行�Q�Ext.namespace("Ext.dojochina"); 则会出错�Q?/p>

2、类实例属�?/font>

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

上面的代码中�Q�name��是Person的一个属性，Ext.apply是Ext提供的一个静态方法，主要作用是将后面一个参数赋到前面的参数对象上�?/p>

Java对照代码�Q?/p>

	private String name = "name";

	public String getName() {
		return name;
	}

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

可以用以下代码调用：

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

alert(_person.name); //�q�里�q�没有设��|��因此弹出默认值name

_person.name = "selfly";

alert(_person.name); //�q�里已经设过��g���Q�弹出selfly

3、类实例�Ҏ��

Ext代码�Q?/font>

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

Java对照代码�Q?/div>

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

实例代码�Q?/p>

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

var _person = new Ext.dojochina.Person();
_person.name = "张三";
_person.sex = "�?/span>";
_person.print();

_person.name = "王五";
_person.sex = "�?/span>";
_person.print();

4、类静态方�?/font>

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("姓名�Q�{0},性别:{1}",this.name,this.sex));
		}
	});
	
Ext.dojochina.Person.print("张三","�?/span>");
Ext.dojochina.Person.print("王五","�?/span>");

5、构造方�?/font>

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("姓名�Q�{0},性别:{1}",this.name,this.sex));
		}
	});
	
Ext.dojochina.Person.print("张三","�?/span>");
Ext.dojochina.Person.print("王五","�?/span>");

6、支持类�l�承

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

Ext.apply(Ext.dojochina.Person.prototype,{
		job:"�?/span>",
		print:function(){
			alert(String.format("姓名�Q�{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�l�承Person�q�给job重新赋�?/span>


Ext.dojochina.Student = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{job:"学生"}); //Student�l�承Person�q�给job重新赋�?/span>
	
	
var _teacher = new Ext.dojochina.Teacher({name:"张三",sex:"�?/span>"});
_teacher.print();

var _student = new Ext.dojochina.Student({name:"王五",sex:"�?/span>"});
_student.print();

7、类实例�Ҏ��重写

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

Ext.apply(Ext.dojochina.Person.prototype,{
		print:function(){
			alert(String.format("姓名�Q�{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�l�承Person�q����写print�Ҏ��

var _teacher = new Ext.dojochina.Teacher({name:"张三",sex:"�?/span>"});
_teacher.print();

8、支持命名空间别名、类别名

Ext.namespace("Ext.dojochina");

Dc = Ext.dojochina;

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

PN = Ext.dojochina.Person;

�q�里把命名空间Ext.dojochina取了一个别名Dc�Q�对于命名空间别名的命名�Q�最好以大写字母开��_��

当然��写字母也没错，但这是一个良好的�~�码规范�?/p>

9、支持事仉��?/font>

Ext的事仉��列模式，由Ext.util.Observable�c�L��持�?/div>

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("�?/span>");

selfly 2010-11-26 09:17 发表评论

使用ExtJS需要引入的文�g

selfly — Fri, 26 Nov 2010 01:04:00 GMT

惌��使用ExtJS�Q�需要在��面引入如下文�g�Q?

	stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

其中上面的�ؓExtJS的样式文�Ӟ��ExtJS漂亮的外观均来自于该样式�Q�下面三个�ؓExt的JS文�g�Q�最后一个�ؓExtJS的简体中文资源文�Ӟ��

上面两个包含了ExtJS的所有功能，如果不是对ExtJS有深入研�IӞ��不是�����用户的话�Q�个人推荐直接引入这两个文�g卛_���Q�需要注意前后引入的��序�Q?/pre>
 
 
 






selfly 2010-11-26 09:04 发表评论