Extjs复习笔记（三）

1、用ext代码往页面中加元素：

 

	Ext.onReady(function(){ //onReady表示在页面加载时运行里面的函数
	
		var _button = new Ext.Button({
					renderTo:document.body, //或者Ext.getBody()
					text:"确 定",
					minWidth:100
			}) ;
		
	}) ;

 

 renderTo：将当前对象所生成的HTML对象存放进指定的对象中。

 

2、为加入的元素加上函数响应

 

	Ext.onReady(function(){
	
		new Ext.Button({
					renderTo:Ext.getBody(),
					text:"确 定",
					listeners:{ //加上事件监听器
						
						"click":function(){ //为click事件添加响应
							
							alert("欢迎访问凌云壮志的博客！") ;
						}
					}
			}) ;
		
	}) ;

 

 也可以先new，再在后面加事件响应

 

	Ext.onReady(function(){
	
		var _btn = new Ext.Button({
					renderTo:Ext.getBody(),
					text:"确 定"
			}) ;
			
		_btn.on("click" , function(){
								
								alert("欢迎访问凌云壮志的博客！") ;
						  }) ;
		
	}) ;

 

 

3、用handler实现事件添加

 

	Ext.onReady(function(){
	
		new Ext.Button({
					renderTo:Ext.getBody(),
					text:"确 定",
					handler:function(){
						
						alert("欢迎访问凌云壮志的博客！") ;
					}
			}) ;
		
	}) ;

 

 

用listener和handler方法都可以添加事件，主要差别是：

handler：指定一个函数句柄，在默认事件触发时调用，此时的默认事件为click

listener：这个是在对象初始化之前，就将一系列的事件进行定义的手段，在进行组件化编程时，特别有用。

 

4、添加文本框：Ext.form.TextField

 

		new Ext.form.TextField({
				renderTo:Ext.getBody(),
				fieldLabel:"姓名"
			}) ;

 

 

5、Panel：

下面试着把文本框加入到Panel里面去

 

		var _panel = new Ext.Panel({
						renderTo:Ext.getBody(),
						layout:"form",
						labelWidth:30,
						listeners:{
							"render":function(_panel){ //当绑定的时候就触发这个事件，相当于直接添加
										_panel.add(new Ext.form.TextField({
													id:"txt_name",
													fieldLabel:"姓名"
												})) ;
									 }
						}}) ;

 

 其中有个layout属性，用来布局。主要有如下几个：

 

 

absolute

accordion

anchor

auto     Default

border

card

column

fit

form

hbox

menu

table

toolbar

vbox

 

个体的可以自己去查Extjs的API，这里主要讲form布局：

官方文档解释：

 

This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of Fields.

This layout manager is used when a Container is configured with the layout:'form' layout config option, and should generally not need to be created directly via the new keyword. See Ext.Container.layout for additional details.

In an application, it will usually be preferrable to use a FormPanel (which is configured with FormLayout as its layout class by default) since it also provides built-in functionality for loading, validating and submitting the form.

 

 其实layout还可以这样写：

layout: {
    type: 'vbox',
    padding: '5',
    align: 'left'
}

 

用到vbox布局

 

6、一个完整一点的示例：

	Ext.onReady(function(){
			
		var _panel = new Ext.Panel({
						renderTo:Ext.getBody(),
						layout:"form",
						labelWidth:30,
						title:"TestPanel",
						listeners:{
							"render":function(_panel){ //在render的时候生成文本框，相当于直接添加
										_panel.add(new Ext.form.TextField({ 
													id:"txt_name",
													fieldLabel:"姓名"
												})) ;
									 }
						}}) ;
						
						
		
		new Ext.Button({
				text:"确 定",
				renderTo:Ext.getBody(),
				handler:function(){
							//得到当前页面中的文本框。
							alert(Ext.getCmp("txt_name").getValue()) ;
						}
			}) ;
		
	}) ;

 

 和上面的Ext.getCmp方法类似的还有一个Ext.getDom.

官方解释：前者是Looks up an existing Componentby id，返回的是The Component, <tt>undefined</tt> if not found, or <tt>null</tt> if a Class was found.

后者是 Return the dom node for the passed String (id), dom node, or Ext.Element.

Optional 'strict' flag is needed for IE since it can return 'name' and 'id' elements by using getElementById. Here are some examples:

// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);

// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
    var dom = Ext.getDom(el);
    // do something with the dom node
}

Note: the dom node to be found actually needs to exist (be rendered, etc) when this method is called to be successful.

 

返回的是一个HTMLElement。