EXT UI 之 Panel 和 form 表单 的一些笔记

生成BUTTON， 把生成的对象放在 document.body中

Ext.onReady(function(){var button = new Ext.Button({renderTo:document.body,text:"OK!",minWidth:200,handler:function(){alert("click");},listeners:{"click":function(){alert("click2");}}})});

alert(button.text);button.setText("Canel");button.on("click", function(){alert("click 3,传统写法");})

Ext.layout.FormLayout 布局下才能正确显示文本框的标签名。

布局的宿主必须是Ext.Container

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:"姓名"}))}}})new Ext.Button({text:"确定",renderTo:Ext.getBody(),handler:function(){alert(Ext.getCmp("txt_name").getValue());}})

添加按钮，注意和上面的区别。 不能提前render

var panel = new Ext.Panel({//renderTo:Ext.getBody(),layout:"form",labelWidth:50,title:"人员信息",width:300,height:500,listeners:{//被正确构建完成后触发 (设计完)"render":function(panel){panel.add(new Ext.form.TextField({id:"txt_name",fieldLabel:"姓名"}))}}})//设计时panel.addButton( {text:"save"} );panel.render(Ext.getBody());

居中的Panel

<style type="text/css">.contain{width:100%;height:100%;top:0;left:0;}.center{position:absolute;top:30%;left:43%;text-align:left;}</style><script type="text/javascript">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:"姓名"} );panel.add( {xtype:"textfield", fieldLabel:"地址"} );panel.add( { fieldLabel: 'Num', xtype: 'numberfield' } );}}});panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{tag:"div", //添加divcls:"contain", //指定 classcn:[{tag:"div", //添加子节点cls:"center"}]},true //返回ext的元素).child("div"));//panel.render(Ext.getBody());//onReady end});</script>