EXTJS

目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源ExtJS简介ExtJS简称EXT，它是一个非常优秀的javascript开发框架，主要用来开发具有绚丽外观的富客户端WEB程序。ExtJS提供了许多非常实用的可视化组件，为我们开发富客户端程序提供了许多功能强大的支持，关于Extjs的相关基本概念及使用方法详见Extjs的API文档。特点：1、开发速度快2、界面效果绚丽3、组件式开发缺点：报错不明确调试有一定的难度。ExtJS简介必须引入的ExtJS库文件及样式文件1.ext-all.css2.ext-base.js3.ext-all.js4.ext-lang-zh_CN.jsExtJS简介常用开发工具Eclipse插件spket-1.6.16编辑javascriptFullsource查看动态生成的html代码ExtJS简介常用文档DHTML手册.chmextjs3.2APIcontents目录/1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源信息提示框Ext.Msg.alert注意：ExtJS中的信息提示框全部都是异步执行的，不会中断程序的执行，如果某些操作需要在信息提示框出现之后执行则相应的代码需要放置回调函数中。scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../extjs/resources/images/default/s.gif';Ext.Msg.alert('提示','信息主体内容',function(){alert('回调函数')});});/script信息提示框Ext.Msg.confirmscripttype=text/javascriptExt.onReady(function(){Ext.Msg.confirm('提示','请单击我，做出选择',callBack);functioncallBack(id){alert('单击的按钮ID是：'+id);}});/script信息提示框Ext.Msg.promptscripttype=text/javascriptExt.onReady(function(){Ext.Msg.prompt('提示','输入一些内容看看：',callBack,this,true);functioncallBack(id,msg){alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);}});/script信息提示框Ext.Msg.waitscripttype=text/javascriptExt.onReady(function(){Ext.Msg.wait('请等待，操作需要很长时间！','提示',{text:'进度条上的文字'});})/script信息提示框Ext.Msg.show（自定义信息提示框）scripttype=text/javascriptExt.onReady(function(){Ext.Msg.show({title:'提示',msg:'我有三个按钮，和一个多行文本区。',modal:true,prompt:true,value:'请输入',fn:callBack,buttons:Ext.Msg.YESNOCANCEL,icon:Ext.Msg.QUESTION})functioncallBack(id,msg){alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);}});/script1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源面板布局fit布局（子面板充满父面板）scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({layout:'fit',title:'Ext.layout.FitLayout布局示例',frame:true,//渲染面板height:150,width:250,applyTo:'panel-div',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色},items:[{title:'子面板'}]})});/script面板布局accordion布局（可折叠）scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({layout:'accordion',layoutConfig:{fill:true//子面板充满父面板的剩余空间},title:'Ext.layout.Accordion布局示例',frame:true,//渲染面板height:150,width:250,applyTo:'panel-div',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items:[{title:'嵌套面板一'},{title:'嵌套面板二'}]})});/script面板布局Card布局（卡片布局）scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({layout:'card',activeItem:0,//设置默认显示第一个子面板title:'Ext.layout.CardLayout布局示例',frame:true,//渲染面板height:150,width:250,applyTo:'panel-div',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items:[{title:'嵌套面板一'},{title:'嵌套面板二'}],buttons:[{text:'显示子面板一',handler:function(){panel.layout.setActiveItem(0);}},{text:'显示子面板二',handler:function(){panel.layout.setActiveItem(1);}}]})});/script面板布局column布局（列布局）scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',frame:true,//渲染面板height:150,width:350,applyTo:'panel-div',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色height:100,frame:true//渲染面板},items:[{title:'子面板一',width:100//指定列宽为100像素},{title:'子面板二',columnWidth:.3//指定列宽为容器剩余宽度的30%},{title:'子面板三',columnWidth:.7//指定列宽为容器剩余宽度的70%}]})});/script面板布局table布局（表格布局）scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({title:'Ext.layout.TableLayout布局示例',layout:'table',layoutConfig:{columns:4},//设置表格布局默认列数为4列frame:true,//渲染面板height:150,width:300,applyTo:'panel-div',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色frame:true,height:50},items:[{title:'子面板一',colspan:3},//设置跨列{title:'子面板二',height:100,rowspan:2},//设置跨行{title:'子面板三'},{title:'子面板四'},{title:'子面板五'}]})});/script面板布局border布局scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({title:'Ext.layout.BorderLayout布局示例',layout:'border',//表格布局height:250,width:400,applyTo:'panel-div',items:[{title:'northPanel',html:'上边',collapsible:true,region:'north',//指定子面板所在区域为northheight:50},{title:'SouthPanel',html:'下边',height:50region:'south'//指定子面板所在区域为south},{title:'WestPanel',html:'左边',width:100,region:'west'//指定子面板所在区域为west},{title:‘eastPanel’,html:‘右边’,width:100,region:'east'//指定子面板所在区域为east},{title:'MainContent',html:'中间',region:'center'//指定子面板所在区域为center}]});});/script面板布局Ext.Viewport（自动充满整个页面）scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';newExt.Viewport({title:'Ext.Viewport示例',layout:'border',//表格布局items:[{title:'northPanel',html:'上边',region:'north',//指定子面板所在区域为northheight:100},{