在panel上加组件
1、设置大小,并加上按钮:
Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", frame:true, width:200, height:300 }) ; _panel.addButton({text:"确 定"}) ; _panel.addButton(new Ext.Button({text:"取 消"})) ; _panel.render(Ext.getBody()) ;//把_panel绑到页面中去 }) ;
其中frame:true指定有边框,使四个角变成圆角,并填充其中的颜色。如下,做一个比较(左边有frame:true)
2、再加两个输入框
有两种添加方法,如下:
Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", frame:true, width:300, height:200, layout:"form", listeners:{ "render":function(_panel){ //“{}”表示一个类,用xtype指定类型 _panel.add({xtype:"textfield" , fieldLabel:"姓名"}) ; //直接new 一个类 _panel.add(new Ext.form.TextField({ fieldLabel:"地址" })) ; } } }) ; _panel.addButton({text:"确 定"}) ; _panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ; _panel.render(Ext.getBody()) ; }) ;
3、让panel不靠边:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" /> <title>不顶边面板</title> <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" src="../../../adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="../../../ext-all.js"> </script> <script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js"> </script> <script type="text/javascript"> Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", frame:true, width:200, height:300 }) ; _panel.addButton({text:"确 定"}) ; _panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ; _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), { tag:"div", id:"contain", //相当于<div id="contain"></div> cn:[{ tag:"div", cls:"center" //相当于<div class="center"></div> }] } , true).child("div")) ; //这边的true下面会讲到 }) ; </script> </head> <body> </body> </html>
上面在applyToMarkup中动态地创建两个div元素,官方解释:Apply this component to existing markup that is valid. With this function, no call to render() is required.
其中有个“true”,它是append的第三个参数,表示返回的是Ext里面的元素,而不是一个html元素
child表示contain下面的center,因为append的内容是contain,而我们要把东西加到center上,所以取其孩子。
renderTo:指定到某个组件上
applyTo:在当前给定的对象之上构建组件,该对象就成为其父元素。
这两个没有什么本质的区别。只是位置有点不同,使用时可以不必太在意。
4、有了上面的基础,我们来写一个登陆框。
Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"登 陆", frame:true, width:260, height:130, layout:"form", labelWidth:45, //设置一下标签的宽度 defaults:{xtype:"textfield" , width:180}, //默认类型为textfield items:[{ //这里面用items来添加组件。items指定的是一个数组,用“[]”引起来 fieldLabel:"账号" //上面已经默认为textfield所以这里可以不写。 },{ fieldLabel:"密码" }], buttons:[{ text:"确 定" },{ text:"取 消" }] }) ; _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), { tag:"div", cls:"contain", cn:[{ tag:"div", cls:"center" }] } , true).child("div")) ; }) ;