Ext.js入门:Window对象与FormPanel(六)
Ext.js入门:Window对象与FormPanel(六)
一:Ext.Window类
二:Ext.Window类实例
三:Ext.FormPanel类
四:Ext.FormPanel类实例
1.类Ext.Window
包: Ext 定义的文件
Window.js 类全称: Ext.Window 继承自于: Ext.Panel
说明: 一种专用于程序中的“视窗”(window)的特殊面板。Window默认下是可拖动的draggable、浮动的窗体。窗体可以最大化到整个视图、恢复原来的大小,还可以最小化minimize。
Windows既可关联到Ext.WindowGroup或籍由Ext.WindowManager来管理, 提供分组(grouping),活动(activation),置前/置后(to front/back)或其它应用程序特定的功能。
缺省状态下,窗体都渲染到document.body。要强制constrain窗体以某个元素为依托就要使用renderTo方法。
2.例:
//html代码
//js代码 var w=new Ext.Window({ el:"win",//主体显示的html元素
width:300, height:200, title:"标题" }); w.show();
3.参数介绍:
因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数
//几个前面没有介绍的window自己的配置参数 1.closeAction:枚举值为:
hide,关闭后,只是hidden窗口 2.closable:true在右上角显示小叉叉的关闭按钮,默认为true 3.constrain:true则强制此window控制在viewport,默认为false 4.modal:true为模式窗口,后面的内容都不能操作,默认为false 5.plain://true则主体背景透明,false则主体有小差别的背景色,默认为false
//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的 w.show()
4.实例介绍
1.嵌套了tabpanel的window
var w=new Ext.Window({ contentEl:"win", width:300, height:200,
el:“win”,
minimizable:true, //最小化
maximizable:true, //最大化 items:new Ext.TabPanel({ activeTab:0,//当前标签为第1个tab(从0开始索引) 设置选项卡的激活状态 border:false, items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页,以后再深入讨论
}), plain:true,//true则主体背景透明,false则主体有小差别的背景色,默认为false title:"标题" }); w.show();
2.添加工具栏
// bbar:[{text:“确定”},{text:“取消”,handler:function(){w.close();}}],//bottom部 buttons:[{text:“确定”},{text:“取消”,handler:function(){w.close();}}],//footer部 buttonAlign:“center”,//footer部按钮排列位置,这里是中间 // collapsible:true,//右上角的收缩按钮
其他与Panel一样!
二:FormPanel
类:Ext.form.FormPanel
包:Extform 定义的文件: Form.js
类全称:Ext.form.FormPanel
继承自于: Ext.Panel
//查看源代码便知,两种方法是一样的 Ext.form.FormPanel = Ext.FormPanel;
1.实例:
}//js代码 var form1 = new Ext.form.FormPanel({ width:350, frame:true,//圆角和浅蓝色背景 renderTo:"form1",//呈现
defaults:{xtype:“textfield”,width:200}, title:"FormPanel", bodyStyle:"padding:5px 5px 0", //边距
items:[
{ fieldLabel:"UserName",//文本框标题 // xtype:"textfield",//表单文本框 name:"user", id:"user", // width:200 },
{ fieldLabel:"PassWord", // xtype:"textfield",
inputType:“password”,//密码显示 name:"pass", id:"pass", // width:200 } ],
buttonAlign:“center”, buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}] });
关于inputType,参数如下:
//input的常用几种类型
radio check text(默认) file password等等
关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:
1.labelAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"
2.labelWidth:fieldlabel的占位宽
3.method:"get"或"post"
4.url:"提交的地址"
5.submit:提交函数
实例2.FormPanel的fieldset应用