ExtJS (3.3的使用)

时间： 2023-07-10 admin IT培训

ExtJS (3.3的使用) 推荐度：
相关推荐

ExtJS (3.3的使用)

项目中使用到 EXT 3.3/3.4 做开发(09年的项目)

下载 Ext 3.3所需的资料

1 面板的创建

2 viewPort 的创建

3 对话框,弹出框

4 选项板 (tabpanel)

也可以直接把html中的标签替换成TabPanel

动态tab

1 面板的创建

显示一个panel


<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link type="text/css" rel="stylesheet" href="ext-3.3.0/resources/css/ext-all.css" /><script language="javascript" src="ext-3.3.0/adapter/ext/ext-base.js"></script><script language="javascript" src="ext-3.3.0/ext-all.js"></script><script language="javascript" src="ext-3.3.0/src/locale/ext-lang-zh_CN.js"></script></head><body><script type="text/javascript">Ext.onReady(function(){new Ext.Panel({title: "面板用法",width: 300,height: 200,renderTo: Ext.getBody(),html: "<h1>面板主区域</h1>",tbar: [{text: "顶部工具栏topToolbar"}],bbar: [{text: "底部工具栏bottomToolbar"}],buttons: [{text: "按钮位于footer"}]});});</script>
</body>
</html>

可以显示一个简单的panel

panel分为5个部分:
顶部工具栏 (tbar),底部工具栏(bbar),面板头部(header),面板底部(bottom),面板主区域(body)

其中: height / width 定义panel显示的宽高

title 是panel的标题

html 是panel中显示的内容

renderTo 确定panel显示的位置

一般把所有的工具栏和面板上的按钮放到一起

 new Ext.Panel({title: "面板用法",width: 300,height: 200,renderTo: div2,html: "<h1>面板主区域</h1>",tbar: [{text: "顶部工具栏"},{text: "底部工具栏"},{text: "刷新"}],buttons: [{text: "按钮位于footer"}]});

面板Panel主要有下面几个特点：

1）、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包含了特定的样式信息；

2）、面板Panel继承自Container类，因此，面板是一个可视化容器组件；也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类；

3）、面板中即可包括其它元素组件，也可以包含特定html代码片段，可以在程序中动态更新面板中的内容；

4）、面板由固定的5个部分组成，除了body部份以外，其它部分都不是必须的。

如果要在面板中放置Ext组件或控件元素，则可以通过面板的items属性来指定，这个属性的值可以是一个数组，表示面板中有很多子元素，也可以是一个对象，表示面板中只定义一个子元素。当面板对象创建以后，可以通过面板容器的add、insert来动态往面板中增加子元素，用remove方法来在面板动态删除子元素。

2 viewPort 的创建

<script type="text/javascript">Ext.onReady(function(){new Ext.Viewport({layout :'fit', items: [{title: "viewPort",html : 'Viewport html',tbar: [{text: "按钮1"},{text: "按钮2"}]}],});});</script>

效果:

Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。他有三个特点：

1）、创建即可使用。不需要渲染，当组件在创建时会自动渲染到document.body节点。

2）、不能使用程序改变该控件的大小，也没有滚动条。

3）、只是作为容器组件，没有额外的属性、方法及事件

Layout制定页面的布局方式

Fit：
在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

border：
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。

参数 split:true 可以调整除了center四个区域的大小。

参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。

center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。

一般Viewport 用来做主页面

<script type="text/javascript">Ext.onReady(function(){new Ext.Viewport({enableTabScroll: true,layout :'border', items: [{title: "NORTH",region : 'north',height : 50,html : '标题',},{title: "WEST",region : 'west',height : 200,html : '左侧导航栏',collapsible:true, },{xtype :'tabpanel',region : 'center',items : [{title : "center1"},{title : "panel2"} ]} ],});});</script>

效果图:

3 对话框,弹出框

Ext对对话框进行了进一步的优化,

<script type="text/javascript">function dalert(){alert("弹出框");}function dconfirm(){var con = confirm("是否确定")alert("选择结果:" + (con?"是":"否"))}function dprompt(){var prop =prompt("请输入");alert("你输入的是: " + prop)}function  alertExt(){Ext.MessageBox.alert("ext 弹出框")}function confirmExt(){Ext.Msg.confirm("选择确认","是否选择?",function(mess){Ext.MessageBox.alert("选择结果 :"  +(mess == "yes" ? "是" : "否"))})}function promptExt() {Ext.MessageBox.prompt("姓名输入","请输入你的姓名:" ,function (mess,text){if(mess == "ok"){Ext.MessageBox.alert("你输入的是 :"  +text)}else{Ext.MessageBox.alert("你放弃了输入")}})}</script><input type="button" onClick="dalert();" value ='弹出框' >  
<input type="button" onClick="dconfirm();" value ='确认框' > 
<input type="button" onClick="dprompt();"  value ='输入框'> <input type="button" onClick="alertExt();" value ='EXT 弹出框'> 
<input type="button" onClick="confirmExt();" value ='EXT 确认框'>
<input type="button" onClick="promptExt();" value ='EXT 输入框'>

Ext 对话框一般包含四个参数:

( String title, String msg, [Function fn], [Object scope] )

其中title 为标题, msg 为提示信息,属于必填项

function 是回调函数, scope 是作用于属于可选项

EXT 对话框效果 : 只在网页中信显示一个很小的弹出框,增加灰色遮罩

建立更好看的对话框

进度条

function waitd(){var waitbox=Ext.Msg.wait("正在保存数据，请稍候。。。","友情提示"); //显示等待对话框waitbox.hide.defer(5000, waitbox); //隐藏对话框}

效果

滚动条:

	var i=0;function progress(){i=0;var msgbx = Ext.Msg.progress("请等待","加载页面","数据加载中,请稍候...")  //显示等待对话框updatep();}function updatep (){i+=0.1;Ext.Msg.updateProgress(i);if(i>1){Ext.Msg.hide();}else{updatep.defer(1000);}}

使用show( ) 调用对话框

function save(){Ext.Msg.show({title : "保存数据",msg :'是否保存?',buttons : Ext.Msg.YESNOCANCEL,fn : callback,icon :Ext.MessageBox.QUESTION});function callback (btn,text){if(btn == 'yes'){alert ("保存完成")}else if(btn =='no'){alert ("没有保存")}else{alert("取消操作")}}}

4 选项板 (tabpanel)

<script language="javascript">
Ext.onReady(function(){  new Ext.TabPanel({renderTo : 'div1',width: 300,  //当前tab的宽度height:400,  //当前tab的高度enableTabScroll:true,  //当tab较多时,会自动出现箭头隐藏之前的tabactiveTab: 0, //默认选择第一个tabitems: [  {title:"面板一", html:"嵌套面板一"}, {title:"面板二", //tab的名称html:"嵌套面板二", //tab的内容closable:'true'    //tab名称的右上角增加删除按钮,点击可删除当前tab},  {title:"面板三", html:"嵌套面板三", closable:'true'}  ]  });  });  
</script>

效果

也可以直接把html中的标签替换成TabPanel


<div id='test'>
<div class='x-tab' title='div1' >1 </div>
<div class='x-tab' title='div2'>2 </div><div title='div3'>3<div class='x-tab' title='div4'>4</div> </div>
</div><script language="javascript">
Ext.onReady(function(){  new Ext.TabPanel({applyTo : 'test',activeTab: 0, //默认选择第一个tabautoTabs : true,deferredRender : false,});  });  
</script>

必须设置 TabPanel 的属性

把autoTabs项设置为true，把deferredRender项设置为false，然后通过applyTo项指定把页面中包含class="x-tab"这种样式的子节点的DOM节点应用于选项板

效果:

由于<div title='div3'> 的class 不是"x-type",所以不会解析成tab, 而<div class='x-tab' title='div4'> 虽然与 div1,div2不在一个节点下,但是仍然会被解析成tab

动态tab

<script language="javascript">
Ext.onReady(function(){  
var i=0;var  tabs= new Ext.TabPanel({renderTo : Ext.getBody(),width: 300,  //当前tab的宽度height:400,  //当前tab的高度enableTabScroll:true,  //当tab较多时,会自动出现箭头隐藏之前的tabactiveTab: 0, //默认选择第一个tabbbar :[{text : 'add',handler :function (){tabs.add({title : "新面板"+i++,closable :true });}},{text : 'insert',handler :function (){tabs.insert(0,{title : "新面板"+i++,closable :true });}},{text : 'delete',handler :function (){		if(tabs.activeTab.closable) {tabs.remove(tabs.activeTab)}}},{text : '关闭所有',handler :function (){tabs.items.each(function(p){if(p.closable) {tabs.remove(p)}} )}}],items: [  {title:"面板一", html:"嵌套面板一"}, {title:"面板二", //tab的名称html:"嵌套面板二", //tab的内容closable:'true'    //tab增加删除按钮},  {title:"面板三", html:"嵌套面板三", closable:'true'}  ]  });  });

可以动态的增加和删除,但是,删除掉时候,会自动跳到初始的面板中,

5 布局

所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等

Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。
Form布局，容器中的元素包括标题及组件内容两项值。
Fit布局，子元素填充整个容器区域。
Accordion布局，折叠布局

6 表单(formPanel)

formPanel 继承自panel ,在panel的基础上提高与表单相关的各种特性, 固定使用form布局

<script language="javascript">Ext.onReady(function(){new Ext.form.FormPanel({renderTo :Ext.getBody(),title : '信息录入',height: 200,width: 300,labelWidth : 60,labelAlign: "right",frame: true,defaults : {xtype : 'textfield',width :180},items: [{name: "username", fieldLabel: "姓名"},{name: "password", fieldLabel: "密码", inputType: "password"},{name: "email", fieldLabel: "电子邮件"},{xtype: "textarea", name: "intro", fieldLabel: "简介"}],buttons:[{text:"提交"}, {text:"取消"}]});});
</script>

结果:

其中:

new Ext.form.FormPanel 来创建表单面板, labelWid表单中标签的宽度,labelAlign 指定字段标签的对齐方式

defaults 中指定该容器中所有子元素默认类型都是 textfield(文本框), 在items定义的子元素中, 都包含一个name属性,相当于

input 标签中的name属性, fieldLabel 指定字段标签,

BasicForm

formPanel 包含一个form属性,该属性是一个 Ext.form.BasicForm 类型的对象,可以直接访问,也可以通过 getForm()方法得到.

BasicForm 表示基本的表单,包含了submit ,load,reset等方法,用来代替 html中<form>标签中的submit,reset等方法,通过调用这些方法可以实现表单提交,信息重置等操作;

优化上个示例

 buttons:[{text:"提交",handler : function (){f.form.submit({waitTtle : '数据提交',waitMsg : '表单提交中,请稍候...'});}}, {text:"重置",handler : function (){f.form.reset();}}]

能够模拟表单提交,重置功能

表单元素 Field

field 代表各种各样的数据录入项, 在程序中,一般直接使用 field的子类, 包括Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField等。

field组件一般包括一个fieldLabel属性和一个name属性

表格(GridPanel)

表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。

ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。

表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)

表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。


<script language="javascript">Ext.onReady(function(){var  data =[[0,'c语言','C语言程序设计','张老师'],[1,'c++','c++程序设计','李老师'],[2,'java','java课程设计','刘老师'],[3,'操作系统','操作系统入门','吴老师']];var store = new Ext.data.SimpleStore({data : data,fields : ['id','names','course','teacher']});var grid =new Ext.grid.GridPanel({renderTo : Ext.getBody(),title  : '编程课程'	,height : 500,width : 400,columns :[{header : '编号',dataIndex : 'id'},{header : '名称',dataIndex : 'names'},{header : '课程',dataIndex : 'course'},{header : '老师',dataIndex : 'teacher'},],store : store,autoExplandColumn : 2});})</script>

效果:

其中: dataIndex 的值要与store中的fields相对应

TreePanel

同步树:

<script language="javascript">Ext.onReady(function(){var  rootNode= new Ext.tree.TreeNode({id :"root",text : "根节点"});var childNode =new Ext.tree.TreeNode({id :"c1",text : "子节点"});rootNode.appendChild(childNode);var store = new Ext.tree.TreePanel({renderTo : Ext.getBody(),root :  rootNode,width: 100});})</script>

TreeNode 表示一个树节点,常用属性有:

id , text , icon, checked