extjs学习04——extjs的初级UI设计1

extjs学习04——extjs的初级UI设计1
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结

一、Ext.Button
说明：改组件代替了传统submit,reset,button等html控件。
构造参数：-text:按钮上的名称
属性：-text:获得当前按钮上的名称
  -minWidth:按钮的最小宽度
方法：-setText:设置按钮上的名称
事件：-click:当点击按钮时触发

Ext.onReady(function(){
	var _button = new Ext.Button({
		renderTo:Ext.getBody(),//此处采用document.body也等同；renderTo始终渲染在页面的body
		text:"确定",
                handler:function(){【只能代替click事件】
                       alert(“hello”);
                }
	});
	alert(_button.text);
        _button.setText(“取消”);
       【_button.text=“取消” 是无效的，因为text属性是read only的】
        listeners:{【推荐使用】
             “click”:function(){
                  alert(“world”);
             }
        }
        _button.on(“click”,function(){【extjs的传统写法，写法灵活】
                                    alert(“extjs”);
                             });
        });

引申
属性：
-renderTo：将当前对象所生成的html对象存放进指定的对象中【在里面】
//-applyTo:将当前对象放在构建的对象上【在上面】
构造参数：
-handler：指定一个函数句柄，在默认事件触发时调用，此时的默认事件为click
   【当点击按钮时触发的函数（可以用于代替click事件）. 】
-listeners：在对象初始化之前，将一系列事件进行定义的手段，在进行组件化编程时特别有用。
【一个配置对象，包含一个或多个事件处理函数，在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象， 一次添加多个事件处理函数。 】

二、Ext.form.TextField
说明：该组件代替了传统的text组件
属性：
-fieldLabel:文本框的标签名称
方法：
-getValue():得到当前文本框的值

Ext.onReady(function(){
	var _panel = new Ext.Panel({
		renderTo:Ext.getBody(),
			layout:"form",【指定一个form布局】
			labelWidth:30,
			listeners:{
				"render":function(_panel){【在对象被添加进指定容器元素后触发】
					_panel.add(new Ext.form.TextField({
						id:"txt_name",
						fieldLabel:"姓名"
					}));
				}
			}
【add方法如果放在此处会出错，因为add方法一定要在_panel对象完全构建完成后才能执行 ，而Ext却不是逐行执行的，所以要放在render事件里面，是运行时方法】
	});

	new Ext.Button({
		text:"确定",
		renderTo:Ext.getBody(),
		handler:function(){
			alert(Ext.getCmp("txt_name").getValue());
		}
	});
});

引申：
Ext.layout.FormLayout:只有在此布局下才能正确显示文本框的标签名，布局的宿主					    对象必须是Ext.Container或者是Ext.Container的子类
在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:”form”即可。
Ext.getCmp(String _id):得到id为**的组件对象

三、Ext.Panel
说明：从某种意义来讲，彻底改变了网页界面是通过html table进行布局的历史
属性：
-title:面板的标签名
-width:指定面板的宽度
-height:指定面板的高度
-frame:为true时把四个角变成圆角
方法：
-addButton(String/Object _config,Function _handler,Object _scope):添加一个按钮对象到面板中
-add(Ext.Component/Object _component):添加一个组件到面板中
事件：
-render:当前对象被正确构造后触发

Ext.onReady(function(){
	var _panel = new Ext.Panel({
		title:"...",
		frame:true,
		width:200,
		height:300,
                layout:"form",
		listeners:{
			"render":function(_panel){
				_panel.add({xtype:"textfield",fieldLabel:"name"});【xtype机制】
				_panel.add(new Ext.form.TextField({
					fieldLabel:"address"
				}));
			}
		}
	});
	_panel.addButton({text:"..."});【这种方式的按钮是由form创建的】
	_panel.addButton(new Ext.Button({text:"...",minWidth:100}));
       【这种方式是由我们添加好了再放进去的】
       【此处的addButton是设计时方法，需要在当前对象未构建前运行】
	_panel.render(Ext.getBody());
       【在render方法之后执行addButton方法是无效的】

        _panel.applyToMarkup(
		Ext.DomHelper.append(Ext.getBody(),{
			tag:"div",
			cls:"contain",
			cn:[{
				tag:"div",
				cls:"center"
			}]
		},true).child("div")
        );
});

引申：
属性：
-xtype:在Extjs的可视化组件部署中有一种xtype机制，即通过指定xtype的值，来告诉容器组件如何初始化包含组件，如xtype:”textfield”，表示使用Ext.form.TextField来进行初始化。

四、通过构造参数方式进行组构
-items:指定包含在面板中的组件的配置数组
-buttons:指定包含在面板中的按钮的配置数组	
Ext.onReady(function(){
	var _panel = new Ext.Panel({
		title:"...",
		frame:true,
		width:200,
		height:300
		layout:"form",
		labelWidth:45,
		defaults:[xtype:"textfield",width:180],
		items:[{
			fieldLabel:"name"
		},{
			fieldLabel:"address"
		}],
		buttons:[{
			text:".1.."
		},{
			text:".2.."
		}]
	});
	_panel.applyToMarkup(
		Ext.DomHelper.append(Ext.getBody(),{
			tag:"div",
			cls:"contain",
			cn:[{
				tag:"div",
				cls:"center"
			}]
		},true).child("div")
	);
});