ExtJs初UI设计进阶教程

ExtJs初级UI设计进阶教程了解Ext.Button:说白了就是网页上的一个按钮。说明：该组件代替了传统submit,reset,button,HTML控件。构造参数：-text:按钮上的名称。属性：-text:获得当前按钮上的名称。通过对象点属性名得到。-minWidth:按钮的最小宽度。方法：-setText:设置按钮上的名称。事件：-click:当点击按钮时触发。由Ext.Button产生的引申话题：属性：-renderTo:将当前对象所生成的HTML对象存放进指定的对象中构造参数：-handler:指定一个方法的引用，在默认事件触发时调用，此时的默认事件为click-listeners：这个是在对象初始化之前，就将一系列事件进行定义的手段，在进行组件化编程时，特别有用。案例如下：查看按钮名称<scripttype="text/javascript">//Ext.getBody()是指得到当前的body对象，得到的是Ext.element类型的对象元素。//document.body=Ext.getBody().dom;同样的效果。//可以把下面的Ext.getBody()改成document.bodyExt.onReady(function(){var_button=newExt.Button({renderTo:Ext.getBody(),text:"确定"//构造参数，值有是"确定'、});alert(_button.text);//查看按钮名称})；</script>取消按钮名称：<scripttype="text/javascript">//Ext.getBody()是指得到当前的body对象，得到的是Ext.element类型的对象元素。//document.body=Ext.getBody().dom;同样的效果。//可以把下面的Ext.getBody()改成document.bodyExt.onReady(function(){var_button=newExt.Button({renderTo:Ext.getBody(),text:"确定"//构造参数，值有是"确定'、})；//alert(_button.text);//查看按钮名称_button.setText("取消");//设置按钮名称})；</script>按钮二。<scripttype="text/javascript">Ext.onReady(function(){//推荐写法newExt.Button({renderTo:Ext.getBody(),text:"确定"，listeners:{"click":function(){alert("欢迎学习ExtJs");}}});})；</script>按钮三：<scripttype="text/javascript">Ext.onReady(function(){//传统写法，只在你的代码也构建成组件化了，你的组件跟你的组件之间进行耦合时用的较多。var_btn=newExt.Button({renderTo:Ext.getBody(),text:"确定"});_btn.on("click",function(){alert("欢迎你学习EXTJS");});});</script>了解Ext.form.TextField说明：该组件代替了传统的text组件属性：--fieldLabel:文本框的标签名称。方法:

-getValue():得到当前的文本框的值。案例：前边的名称不显示：<scripttype="text/javascript" >Ext.onReady(function(){newExt.form.TextField({renderTo:Ext.getBody(),fieldLabel:"姓名”});});</script>由Ext.from.TextField产生的引申话题Ext.layout.FormLayout:只能在此布局下才能正确显示文本框的标签名，布局的宿主对象必须是Ext.Container或者Ext.Container的子类。在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:"form”即可。Ext.getCmp(string_id):得到id%_id的组件对象。了解Ext.Panel说明：从某种意义来讲，其彻底改变了网页界面是通过HTMLTable进行布局的历史。属性：--title:面板的标签名--width:指定面板的宽度--height:指定面板的高度--frame:当为true，是把四个角成圆形。方法：--addButton(String/Object_config.Function_haneler,Ob