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始终渲染在页面的bodytext:"确定",                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:300layout:"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"));});