生成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()); } })
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", //添加div cls:"contain", //指定 class cn:[{ tag:"div", //添加子节点 cls:"center" }] },true //返回ext的元素 ).child("div")); //panel.render(Ext.getBody()); //onReady end }); </script>