extjs 总结

最新推荐文章于 2024-07-19 15:23:49 发布

weixin_34239592

最新推荐文章于 2024-07-19 15:23:49 发布

阅读量154

点赞数

文章标签： ui java javascript ViewUI

原文链接：http://www.cnblogs.com/smilings/archive/2013/02/21/2919932.html

版权

Ext.get(id) 所得到的是一个Ext.element类的一个实例，其方法、属性如下：

var el=new Ext.Element(“<font>sd</font>”);

Ext.get(id).toggle(true); //动画地显示和隐藏 Ext.get(id).addClass(“myclass”); //增加样式

Ext.get(id).removeClass(“myclass”); Ext.get(id).hasClass(“sd”);

addClassOnClick()、 addClassOnFocus()、 addClassOnOver()、 addKeyListener()、 appendChild()、 appendTo()、 createChild()、 get()、 getBox()、

getCenterXY()、 getXY()、 initDD()//实现拖动、 insertBefore() 、 load(url)、

mask()//遮罩的效果，变暗、toggle(true)、update(“更新的内容”); Ext.get(id).update(“<a>sdf</a>”);

element类的实例的dom() 方法可获得对应id 的dom元素 Alert（Panel.el.dom.innerHTML）

元素Element、组件component 元素无具体的外观，而组件有具体外观

Component的el属性得到的是element 的对象，一些方法，元素有，而组件没有，就可以先获得组件的对应的element对象，在调用element的相关方法，如mask()方法；

只有当组件渲染后才能用使用el属性,即在render后才能使用

Component、dom、element之间的关系：

dom是文档对象模型，代表页面中的各个节点对象；Ext.getDom() 、cmp.el.dom//可访问dom节点

Ext.element是对dom节点的封装，解决跨浏览器问题 cmp.el //得到Element对象

Component提供了一个组件及控件体系，控件是比较具体的东西，如菜单、工具栏、面板、树、

Ext类提供的获取Element、dom、component的方法、属性：get()、getCmp()、getDoc()、getDom()、id()

Get(mixed el): Element getBoby(): Ext.Element getCmp(id):Ext.Component

getDoc():Ext.Element getDom(mixed el:htmlElement //可直接访问该节点

Ext.getCmp(“hell0”).el.dom.innerHTML

组件的基本应用：

1组件的类别xtype：Ext2中通过一个xtype来制定组件的类别唯一标识。

2创建及使用组件的两种方法：1、使用new来创建；2、在容器中使用xtype来使用 getXtype（）

3组件的配置选项：在大多数Ext组件中，都支持构造函数中传递一个对象作为参数，在这个对象中包含组件的详细参数描述，Ext根据这些参数来创建组件；

4组件渲染render及显示show 组件只有在渲染后才能在页面中显示，可以通过多种方法来渲染及显示；可通过render或在组件中直接用applyTo或renderTo或el、show();

Panel.render(“div”);

等价于

Var panel=new Ext.Panel({title:”面板”,width:300,height:300,renderTo:”test”});

等价于

Var panel=new Ext.Panel({title:”面板”,width:300,height:300,applyTo:”test”});

等价于

Var panel=new Ext.Panel({title:”面板”,width:300,height:300,el:”test”});

Panel.render();

等价于

Var panel=new Ext.Panel({title:”面板”,width:300,height:300,el:”test”});

Panel.show();

-------------------------------------------------------------------------------------------------

Var panel=new Ext.Panel({title:”面板”,width:200,height:300});

Panel.add(new Ext.Button({title:”按钮”});); //为面板增加按钮

Panle.add(new Ext.Panel({title:”子面板”}));

等价于：

Var panel=new Ext.Panel({title:”面板”,width:200,height:300});

Panel.add({xtype:”button”,title:”按钮”}); //为面板增加按钮

Panle.add({title:”子面板”});

等价于：

Var panel=new Ext.Panel({title:”面板”,

width:200,

height:300,

item:[{xtype:”button”,text:” 按钮”},{title:”子面板”}]

});

基本组件、容器组件、表单组件

ExtJS实用简明教程 [收集整理:龚辟愚、QQ群：19274175]

grid Ext.grid.GridPanel 表格

paging Ext.PagingToolbar 工具栏中的间隔

panel Ext.Panel 面板

progress Ext.ProgressBar 进度条

splitbutton Ext.SplitButton 可分裂的按钮

tabpanel Ext.TabPanel 选项面板

treepanel Ext.tree.TreePanel 树

viewport Ext.ViewPort 视图

window Ext.Window 窗口

工具栏组件有

toolbar Ext.Toolbar 工具栏

tbbutton Ext.Toolbar.Button 按钮

tbfill Ext.Toolbar.Fill 文件

tbitem Ext.Toolbar.Item 工具条项目

tbseparator Ext.Toolbar.Separator 工具栏分隔符

tbspacer Ext.Toolbar.Spacer 工具栏空白

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮

tbtext Ext.Toolbar.TextItem 工具栏文本项

表单及字段组件包含

form Ext.FormPanel Form面板

checkbox Ext.form.Checkbox checkbox录入框

combo Ext.form.ComboBox combo选择项

datefield Ext.form.DateField 日期选择项

field Ext.form.Field 表单字段

fieldset Ext.form.FieldSet 表单字段组

hidden Ext.form.Hidden 表单隐藏域

htmleditor Ext.form.HtmlEditor html 编辑器

numberfield Ext.form.NumberField 数字编辑器

radio Ext.form.Radio 单选按钮

textarea Ext.form.TextArea 区域文本框

textfield Ext.form.TextField 表单文本框

timefield Ext.form.TimeField 时间录入项

trigger Ext.form.TriggerField 触发录入项

组件属性：

只读属性、可读写属性

组件方法（component）

组件的事件及处理：Ext对传统的事件的封装及增强，

1在event基础上提供了一个eventObject；

2全局的事件管理器EventManger； addListener(“click”,fn), on, removeLIistener

支持事件队列（同一个对象可用多个addLIstener()）;

支持延迟响应 Ext.get(id).on(“click”,fn,this,{delay:2000}); //延迟两秒执行fn

Component的父类Observable提供事件监听处理机制（render事件）

panel.addListener(“render”,fn); panel.render(“div”);

beforehide事件：

function confirmHide(){

return confirm(“是否真要隐藏这个组件？”);

}

Ext.onready(){

var panel=new Ext.Panel({title:”面板”,width:300,height:300});

panel.on(“beforehide”,confirmHide);

panel.render(“test”);

panel.hide();

}

组件的生命周期：

一、初始化 1）配置选项处理 2）创建组件事件 3）注册组件 4）调用initcomponent方法 5)状态初始化 6)加载组件插件 7)是否渲染

二、渲染 1)触发beforerender事件 2)设置container 3）调用onRender方法

4)使用自定义样式 5)触发render事件 6）调用afterRender

7)组件隐藏或禁用

三、销毁 1)触发beforeDestory事件 2) 调用beforeDestory方法

3）删除元素监听及对应DOM 4)调用onDestory方法

5)注销组件ComponentMgr 6)触发destory 事件

7)删除组件的事件

Component类：

Config Options: applyTo、hideMode 、renderTo、hideParent、id、xtype;

属性：disabled、hidden、initialConfig、ownerCt、rendered

方法：addClass()、disable()、enable()、focus()、getEl()、getId()、getXType、hide()、isVisible()、render()、show；

事件: beforeDestory、beforeHide、beforerender、beforeshow、beforestaterestore、destory、disable、enable、hide、render、show、

容器container组件，子类panel,viewport：

Config options：activeItem、defaultType、default、hideBorders、items、layout、layoutconfig

属性：items

方法：add()、bubble()、cascade()、doLayout()、find()、findById()、findByType()、getComponent()、getLayout()、

Remove（）；

事件：add、afterlayout、beforeadd、beforeremove、remove、

1、RIA简介

　1、富因特网应用程序（Rich Internet Applications，RIA），集成桌面应用的交互性和传统 Web应用的部署灵活性；

　2、SaaS是以后软件发展的一个趋势，而RIA从技术上推进SaaS；

　3、RIA开发必备三个要素：富客户端技术、服务器技术和开发工具。

2、几种富客户端技术

1、Macromedia Flex－Adobe公司的RIA解决方案，在Flash运行时环境中运行(MXML)。

2、JavaFx－Sun的RIA解决方案，在Java虚拟机(1.5)上运行(VRML)。

3、WPF/SilverLight－Microsoft的RIA解决方案，在浏览器端的.Net运行时插件中运行 (XAML) 。

4、 Ajax－使用标准W3C技术，不需要额外的运行环境支持，如Backbase及Ext。

3、Ajax概念

Ajax的核心是无刷新变更页面中的部分内容。

Ajax不是一项技术。它其实是几项技术，每项技术自身都很繁荣，它们以强有力的全新方式结合起来。Html、xhtml、DOM、CSS、XML、XMLHttpRequest、javascript。

l 常用Ajax框架 Prototype.js、YUI、JQuery、Dojo、Echo2、Ext

4、ExtJS 是什么？

Ext是一个Ajax框架，用于在客户端创建丰富多彩的web应用程序界面，是在Yahoo! UI的基础上发展而来的。官方网址：http://www.extjs.com/ 现在改为:www.sencha.com。

ExtJS是一个用来开发前端应用程序界面的JS框架，借鉴Swing等思想，提供了一套完整的组件库及强大的ajax支持功能，可以用Ext来开发基于Ajax的富客户端应用。

ExtJS的特点

　 1、使用标准的W3C技术；

　 2、庞大的组件模型及控件库；

　 3、丰富绚丽的界面元素；

　 4、强大实用的工具封装

　 5、开源GPL

5、ext3.2.1 压缩包（rosurce包下放的是样式表，example是例子，adapter包放的是驱动、库文件）

将解压后的文件引入项目中，放在webroot下，

如何使用ExtJS（ext-base.js 表示框架基础库，ext-all.js是extjs的核心库。）

引入ExtJS的样式文件

引入ExtJS的脚本库(两个，一个驱动adapter,另外一个ext-all.js，放在adapter包下)

Ext应用代码：使用Ext.onReady来调用ExtJS组件

第一个Hello World程序

Ext.onReady(function(){

var win= new Ext.Window({title:"很cool的窗口",width:500,height:400,buttons:[{text:"确定"},{text:"取消"}]});

win.show();

})

显示一棵树

var tree=new Ext.tree.TreePanel({

title:"小树一棵",width:200,height:200,

root:new Ext.tree.AsyncTreeNode({text:"树根",children:[{text:"叶子1",leaf:true},{text:"叶子2",leaf:true}]})

}); //初始化后要渲染才能将组件显示出来

6、Ext的事件驱动编程

Ext.get(“id”) //获取一个指定id的ext对象

Ext.get(“id”).on(“click”,function(){}) //on相当于addListener为选定对象增加监听器及所要绑定的方法

Ext.get(“id”).on(“click”,function(e){e.constructor}) //e为事件event对象，在这里是ext对事件对象进行了封装，为eventObject类型的事件对象；e.preventDefault(); //阻止默认方法

所有的组件都继承util包下的observable类，有许多共有的方法查询api来查询方法

7、Component类是所有的控件的父类（创建组件时，有许多配置选项的设置），每个组件都有一id属性；

BoxComponent类调整组件的形状（高、宽）、位置.

Container类，继承BoxComponent类，容器类。有诸如items,layout的属性 xtype用来设定组件类型，如不指定xtype，默认为pannel,

Panel类，也是容器类，通过items属性将组件放入容器中。Add()方法将组件加入容器,是可视化容器组件的父类，其子类有如window,fieldSet,formPanel,TreePanel等,其父类：Container

面板有静态的五大部分：头部、顶部工具栏、底部工具栏、body区域（可放置HTML，或动态加载一个文件中的内容autoLoad:”news.html”）、底部区域

在面板中寻找组件：用find(),findById(),findByType(),get(),getComponent(),

更新面板内容：用load(url)方法更新内容，或panel.body.update(“要更新的内容”);

8、Viewport类，继承自Container类，代表整个应用程序（浏览器）界面，var viewport=new Ext.Viewport;会自动渲染到document.body上；会随窗口的大小变化而变化；主要用于做主界面；

9、Window表示应用程序窗口，其实是一个浮动的层，直接调用show方法显示窗口，窗口有关闭按钮；

窗口的关闭直接调用close方法，窗口的隐藏使用hide方法； closeAction可取值hide（隐藏，消耗小）,close(关闭，需重新创建，耗费资源);在实际的开发中，一般都是创建几个窗口，用时再调用，相当于连接池，速度快；一般将closeAction设置为hide；

使用modal属性来配置模式窗口（弹出窗口时，只能操作该窗口后，才能做其他操作）。模态窗口

补充:

1、Viewport，顶级界面，浏览器显示区域。

代表整个浏览器的应用程序主界面控件。VeiwPort表示整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。看下面的代码：

Ext.onReady(function(){

new Ext.Viewport({

layout:"fit",

items:[{title:"面板",

html:"",

bbar:[{text:"按钮1"},

{text:"按钮2"}]

}]

});

２、Viewport特点

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

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

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

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

下面再来看看Viewport的应用场景：

Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等，当然在需要的时候其它布局也可以使用。看下面的代码：

Ext.onReady(function(){

new Ext.Viewport({

enableTabScroll:true,

layout:"border",

items:[{title:"面板",

region:"north",

height:50,

html:"<h1>网站后台管理系统!</h1>"

{title:"菜单",

region:"west",

width:200,

collapsible:true,

html:"菜单栏"

{

xtype:"tabpanel",

region:"center",

items:[{title:"面板1"},

{title:"面板2"}]

}

]

});

３、窗口Window

　　我们来讲窗口Window控件，他可以用来表示应用程序中的一个窗口，在窗口中可以放置种种界面元素。窗口Ext.Window的父类是Ext.Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

　　由于窗口是总是顶级容器，因此一般情况下我都是直接使用new操作符来创建一个Ext.Window对象来使用窗口。窗口中的内容与面板一样，可以是各种各样的Ext组件或控件元素，也可以是html片段或指定url中的html内容。由于窗口是一种特殊的面板，因此面板的能用特性对窗口仍然适用。相对于面板Ext.Panel来说，他不需要指定渲染目标，也就是不需要指定渲染到页面中的某一个节点。当调用窗口的show方法的时候，他会自动把窗口渲染(render)到当前文档的body节点中，并使该面板浮动在页面中，使得窗口不依赖于其它的父容器而存在。

４、窗口关闭及隐藏

　　窗口的隐藏及关闭。在程序中我们可以直接调用窗口对象的相关方法来实现窗口的隐藏及关闭操作。其中hide()方法用来隐藏窗口，而close()方法则用来直接关闭并销毁窗口。如果程序窗口在后面的程序中不需要重新显示，则应该使用hide()方法，这样可以节省再次初始化这个窗口所产生的资源消耗；如果窗口在后面的程序中不需要重新显示，则应该调用close()来关闭窗口，从而释放窗口对象所占用的系统资源。

　　默认情况下，窗口的标题工具栏中会包括一个关闭按钮，点击该按钮会执行窗口的关闭或隐藏操作。

５、模态及非模态窗口

　　窗口可以分为模态窗口及非模态窗口两种类型，所谓模态窗口就是指当该窗口打开时，除了本窗口中的内容可以操作以外，窗口以外的控件、界面元素及内容都处于不可用状态，只有当关闭该窗口后，这些变成不可用状态的元素及内容才能恢复成为可用状态；而非模态窗口打开时，不影响窗口以外的其它元素的可操作及可用状态。

　　在配置选项中通过modal选项来指定窗口是否属于模式窗口。默认情况下的窗口都是非模态窗口，当把modal属性设置为true时，窗口就会变成一个模态窗口。

10、对话框

１、传统对话框

　　所谓对话框，就是在程序执行的过程，出现在用户界面中的一个需要用户进行确认、选择或录入相关信息的微型窗口。

　　在传统的html页面中，浏览器提供了三种默认的对话框函数。也就是alert、confirm及prompt等。其中alert用来弹出一个提示信息，并让用户确认，而confirm是让用户进行某一种操作的选择，prompt则是用来弹出一个信息录入对话框。下面是浏览器对话框的使用示例：

function alertDialog(){

alert("这是浏览器定义的信息提示框");

}

function confirmDialog(){

var ret=confirm("是否要删除该记录?");

alert("选择结果:"+(ret?"是":"否"));

}

function inputDialog(){

var ret=prompt("请输入你的姓名:","");

alert("你输入的是:"+ret);

}

</script>

</head>

<body>

</body>

由于传统使用alert、confirm等方法产生的对话框非常古板，对话框的很多部份内容都已经固定，很难增加自定义的内容，并且UI很不好看。因此，ExtJS提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm等，实现华丽的应用程序界面。

２、Ext中提供的对话框Ext.MessageBox及Ext.Msg

　　Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg类直接调用相应的对话框方法来显示漂亮的Ext对话框。使用Ext的对话框功能，上面例子中的三个方法可以改写成如何的形式：

　　function alertDialog(){

Ext.MessageBox.alert("友情提示","这是浏览器定义的信息提示框");

　　}

　　function confirmDialog(){

　　　　　　var ret=Ext.Msg.confirm("删除确认","是否真的要删除该记录?",function(btuuon){

alert("选择结果:"+(btuuon=="yes"?"是":"否"));

});

　　}

　　function inputDialog(){

Ext.MessageBox.prompt("姓名输入","请输入你的姓名:",function(button,text){

if(button=="ok"){

alert("你输入的是:"+text);

}

else alert("你放弃了录入!");

});

}

Ext提供的这些显示普通对话框的方法一般包括四个参数，比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ，参数title表示对话框的标题，参数msg表示对话框中的提示信息，这两个参数是必须的；可选的参数fn表示当关闭对话框后执行的回调函数，参数scope表示回调函数执行的作用域。回调函数可以包含两个参数，即button与text,button表示被点击的按钮，text表示对话框中(比如prompt)有输入选项时用户输入的内容。我们可以在回调函数中通过button参数来判断用户作了什么选择，可以通过text来读取在对话框中输入的内容。

３、Ext对话框的特性及回调函数callback

　　Ext的对话框是包含特定内容的Ext窗口控件，由于Ext的窗口本质上是页面中的DIV标签，因此，Ext对话框中的内容支持各种HTML元素；其次，与浏览对话框可以直接使用赋值语句得到对话框的用户选项及输入内容不同，Ext对话框只能通过回调函数来处理用户的选项及输入的内容。回调函数中对话框显示的时候作为参数传递给相应的对话框显示方法；要注意的一点是，浏览器对话框只有在对话框关闭后才会执行后面的javascript语句，而Ext对话框在显示后会立即执行其后面的语句，而不管对话框是否关闭。

　　下面使用Ext对话框的方式是不对的：

　　function inputDialog(){

var ret=Ext.MessageBox.prompt("姓名输入","请输入你的姓名:");

//返回的不是字符串类型，需要回调函数来处理输入的内容

alert("你输入的内容是："+ret);

　　}

４、wait及progress对话框

　　MessageBox对象的wait方法用来在页面中显示一个信息等待框，当一个wait信息框显示以后，在应用程序执行了一系列处理操作完成后需要，需要通过调用MessageBox对象的hide()方法来隐藏当前对话框。下面是显示wait对话框的示例代码：

　　function wait(){

var msgbox=Ext.Msg.wait("请稍候","正在保存数据，请稍候。。。。。。");//显示等待对话框

//执行大数据的处理或网络请求等操作

msgbox.hide.defer(5000,msgbox);//隐藏对话框

}

　　下面再来看看带有滚动条的对话框使用，示例代码如下：

　　var t=0;

　　function progress(){

t=0;

var msgbox=Ext.Msg.progress("请稍候","保存数据","正在保存数据，请稍候。。。。。。");//显示等待对话框

//执行大数据的处理或网络请求等操作

updateProgress();

}

　　function updateProgress(){

t+=0.1;

Ext.Msg.updateProgress(t);

if(t>1)Ext.Msg.hide();

else updateProgress.defer(1000);

}

5、使用show方法显示对话框

function doSave(button,text){

if(button=="yes")

{

//执行数据保存操作

}

else if(button=="no")

{

//不保存数据

}

else

{

//取消当前操作

}

function save(){

Ext.Msg.show({

title:'保存数据',

msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',

buttons: Ext.Msg.YESNOCANCEL,

fn: doSave,

icon: Ext.MessageBox.QUESTION

});

}

11、layout：

１、布局概述

　　容器中可以放置各种各样的元素，这些元素在容器怎么排放，是从左到右，还是从上到下，这些是容器自身所不知道的。容器中的子元素如何排放，在Ext中由布局来处理。　　

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

　　Ext提供了一套功能强大的布局系统，通过这些布局的应用，可以满足应用程序中各种复杂的用户界面布局处理，下面我们将对ExtJS中的布局作介绍。Ext中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可。

　　布局主要应用于容器组件，在Container类中，提供了一个layout配置选项，该项可以是一个预定义布局名称（字符串），也可以是一个布局对象。比如下面是两种使用布局的方式：

new Ext.Panel({

renderTo:"test",

width:400,

height:100,

layout:new Ext.layout.ColumnLayout(),

items:[{columnWidth:.5, title:"面板1"},

{columnWidth:.5, title:"面板2"}]

});

new Ext.Panel({

renderTo:"test",

width:400,

height:100,

layout:"column",

items:[{columnWidth:0.5, title:"面板1"},

{columnWidth:0.5, title:"面板2"}]

});

　　ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。

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

２、通过Examples看常用布局示例,

　　Ext Layout Browser、Border Layout示例；

３、Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置，加上width、height的设置。注意：布局时，必须有center部分，否则会报错，如要分为左右两部分，用west,center两部分，而不是west,east；屏幕自适用（随窗口大小变化而变化）； split:true时，可以将边框拉动，改变窗口大小；可以将面板中的一部分收缩、隐藏，用collapsible:true来设置面板可收缩和隐藏。

４、Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度（各个组件的宽度比例总和为1）。

５、Form布局，容器中的元素包括标题及组件内容两项值。

６、Fit布局，子元素填充整个容器区域。（每一个组件或面板和窗口一样大，只能看到一个组件或面板，其他组件或面板被遮蔽，不能显现）

７、Accordion布局，折叠布局

8、table布局

9、anchor布局 anchor:’20% 30%’, 或anchor:’-50 5%’ 以父窗口为标准，设置子窗口的大小，-50表示右边留下50的宽度；

12、tabpanel

继承自panel，配置：deferredRender:延迟渲染 enableTabScroll:多个选项卡时的滚动条 tabMargin:选项卡之间的间距 tabPosition:选项卡的位置（bottom、top） activeTab:默认激活的选项卡 closable:可关闭的

实例：

Function isRender(p){

Alert(p.title+”被渲染了”);

}

Ext.onReady(function(){

Var i=0;

Var tabpanel=new Ext.TabPanel({

//tabpanel里面的选项卡是一个panel

ativeTab:1, //默认激活的选项卡下标

enableTabScroll:true, //加滚动条

deferredRender:false, //延迟加载

tabPosition:top, //选项卡的位置，值可为top/bottom

bbar:[{text:”添加选项卡”，handler:function(){ var id=”tab”+i;

tabpanel.add({id:id,title:”子面板”+(i++) });

tabpanel.setActiveTab(id); //将其设为激活状态

},{

Text:”删除选项卡”,

Handler:function(){

var tab=tabpanel.getActiveTab(); //获取激活窗口

tabpanel.remove(tab); //删除选定窗口

}

} }],

Items:[{

Xtype:”panel”,

Title:”选项卡1”,

Html:”sdfsdd”,

Listeners:{render:isRender} //监听器

},{

Title:”选项卡2”,

autoLoad:”news.html”

}]

});

new Ext.Viewport(layout:”fit”, //填充整个窗口

items:tabpanel);

})

13、GridPanel

１、表格GridPanel概述

　　ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。

　　表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

２、表格应用示例

　　我们首先来看最简单的使用表格的代码：

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var vstore=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中国Java开源产品及团队",

height:150,

width:600,

columns:[{header:"项目名称",dataIndex:"name",width:300,sortable:true}, //sortable:可排序

{header:"开发团队",dataIndex:"organization"},

{header:"网址",dataIndex:"homepage",renderer:function(v){return v.link(v);} }], //renderer，将网址加上链接

store:vstore,

autoExpandColumn:2

});

３、定制表格显示内容

　　调整column中的renderer，显示丰富多彩的内容。

４、EditorGridPanel

　　可编辑的表格，用于实现在线编辑表格；在column中，通过指定一个editor，也就是Field的实例来实现表格编辑功能。

５、PropertyGrid（可用于修改已有的数据使用）

　　属性编辑表格，只有固定的两列，一列表示属性名称，另外一列表示属性值。示例：

var grid = new Ext.grid.PropertyGrid({

title: 'Properties Grid',

autoHeight: true,

width: 300,

renderTo: 'grid-ct',

source: {

name: "My Object",

Created: new Date(Date.parse('10/15/2006')),

Available: false,

Version: .01,

Description: "A test object"

}

});

14、TreePanel

１、树控件的简单应用

　　树控件由Ext.tree.TreePanel类定义，控件的名称为treepanel，TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单，我们先来看下面的代码：

Ext.onReady(function(){

var root=new Ext.tree.TreeNode({

id:"root",

text:"树的根"});

root.appendChild(new Ext.tree.TreeNode({

id:"c1",

text:"子节点"

}));

var tree=new Ext.tree.TreePanel({

renderTo:"hello",

root:root,

width:100

});

２、树节点Ext.tree.TreeNode

　　TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等。

３、异步树Ext.tree.AsyncTreeNode

　　在很多时候，树的节点是动态产生的，也就是需要从服务器端的一个url中获得树的节点信息。ExtJS的树控件提供了对这种功能的支持，你只需要在创建树控件的时候，通过给树指定一个节点加载器，就可以从服务器端动态加载树的节点信息。我们来看下面的代码：

var root=new Ext.tree.AsyncTreeNode({

id:"root",

text:"树的根"});

var tree=new Ext.tree.TreePanel({

renderTo:"hello",

root:root,

loader: new Ext.tree.TreeLoader({url:"treedata.js"}),

width:100

});

treedata.js这个url返回的内容如下：

[{

id: 1,

text: '子节点1',

leaf: true

},{

id: 2,

text: '儿子节点2',

children: [{

id: 3,

text: '孙子节点',

leaf: true

}]

４、树加载器Ext.tree.TreeLoader

　　凡是异步树节点，都需指定一个树加载器，TreeLoader会根据需要，通过Ajax的方式自动从指定的url或内存中加载树节点信息。

　　可以在准备加载一个树节点之前，更改TreeLoader的相关信息，示例：

　　myTreeLoader.on("beforeload", function(treeLoader, node) {

this.baseParams.category = node.attributes.category;

}, this);

例子：

Function simpleTreeLoader(){

Var vroot=new Ext.tree.AsyncTreeNode({id:”root”,text:”树根”,leaf:false});

var vloader=new Ext.tree.TreeLoader({url:”tree.jsp”,baseParams:{} });

vloader.on(“beforeload”,function(loader,node){

loader.baseParams.parent=(node.id==”root”?””:node.text);

})

Var panel=new Ext.tree.TreePanel(

{Title:”树的实例”,

height:300,

width:300,

enableDD:true, //支持拖动

loader:vloader,

root:vroot}

);

panel.render(document.body);

}

Ext.onReady(simpleTreeLoader);

Tree.jsp------

<%page language=”java” contentType=”text/html; charset=UTF-8” pageEncoding=”UTF-8”%>

String parent=request.getParameter(“parent”);

If(parent==null||””.equals(parent)){

Out.println(“[{text:\”北京\”},{text:\”四川\”}]”);

}else if(“北京”.equals(parent)){

Out.println({text:’海淀’,leaf:true},{text:’昌平’,leaf:true});

} else if(“四川”.equals(parent)){

Out.println({text:’成都’,leaf:true},{text:’绵阳’,leaf:true});

}

15、工具栏菜单

工具栏的分隔符：“—”（）将工具栏的选项挤向右边用”—>”即可

tbar:[{text:”编辑”},”—>”,{text:”查询”},”请输入姓名”,new Ext.form.TextField()] //文本框

tbar:[{text:”布局”,menu:{items:[text:”菜单1”} , [text:”菜单2”} , [text:”菜单3”} ] }]

自定义菜单：var menu=new Ext.menu.Menu({items:[{text:”新建表”,handler:function(){ new Ext.Msg.prompt(“提示”,”请输入名称”);} } , {删除表} ]});

Panel.on(“contextmenu”,function(node,eventObject){ menu.showAt(e.getXY);}); //将自定义的菜单右键弹出

16、form表单（Ext.form.Formpanel）

Config options: buttons、formId、labelAlign、labelAlign、hideLabels;

方法: formPanel、getForm、load、

事件：clientvalidatin、

要得到一个basicform的实例,需要调用formpanel对象的getForm()方法，也可通过formpanel.form得到；

BasicForm(Ext.form.BasicForm) :代表真正的表单元素，basicform的属性完全可以适用于formpanel对象（创建formpanel的时候，就会创建basicForm的一个实例）

Config options:baseParams、fileUpload（在视图中是看不到的，当fileupload=true时，Ext会自动创建一个iframe，将表单的内容隐藏到iframe中，Ajax不能提交二进制内容的）、listener、method、

在表单中可以放很多元素，如：numberfield、radio、textarea、textfield、timefield、label、hidden、fieldSet、field等

１、表单

　　对于传统的b/s应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外FormPanel固定使用form布局，前面关于布局一节中的内容我们说过，form布局也就是专门用于组织包含输入元素的布局。

看下面的代码：

Ext.onReady(function(){

Ext.QuickTips.init(); //将鼠标放在错误字段时，会提示错误信息

var form=new Ext.form.FormPanel({

renderTo:"hello",

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:"datafield",name:”birth”,fieldLabel:"出生日期"},

{xtype:"textarea",name:"intro",fieldLabel:"简介"}

buttons:[{text:"提交",handler:function(){form.getForm().submit( {

url:”reg.jsp”,

success:function(){Ext.Msg.alert(“提示”,”数据保存成功”);} } )} },

{text:"重置",handler:function(){form.form.reset(); //重置} },

{text:"加载数据",handler:function(){form.form.load(url:”getreg.jsp”,params:{id:5} }); //加载数据} },

{text:"设值",handler:function(){form.form.setValues({username:”黎明”,email:”dsdf@.com”}); //设值

Form.form.findField(“username”).getValue(); //可获得username的值

} }]

})

});

后台取数据reg.jsp---------------------------------------

<% page language =”java” contentType=”…” pageEncoding=”utf-8”%>

String name=request.getParameter(“name”);

{ success:true } //返回给客户端，表示接受数据成功

{ success:false, error:{name:”用户名重复”} } //返回给客户端，表示接受数据失败

后台加载数据getreg.jsp---------------------------------------

<% page language =”java” contentType=”…” pageEncoding=”utf-8”%>

//形式都是固定的

String id=request.getParameter(“id”);

If(id!=null||”5”.equals(id)){

{ success:true, data:{“username”:”lily”,password:”3333”,email:sdfsd@.com}

}

Else{ out.println(“{success:false}”);}

　　在上面的代码中，使用new Ext.form.FormPanel来创建表单面板，通过labelWidth来指定表单中字段标签的宽度，labelAlign来指定字段标签的对齐方式，在defaults中指定该容器中所有子元素默认类型都是textfield，也就是录入文本框。在items定义的子元素中，一共包含三个textfield元素以及一个textarea元素，这些元素都包含一个name属性，相当于传统<input>标签中的name属性，fieldLabel属性用来指定字段标签。

２、BasicForm

　　表单面板FormPanel包含一个form属性，该属性是一个Ext.form.BasicForm 类型的对象，可以直接访问，也可以通过getForm()方法得到。BasicForm 表示基本的表单，包含了submit、load、reset等方法，用来取代传统表单<form>中的submit、reset等方法，通过调用这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作：

Ext.onReady(function(){

var f=new Ext.form.FormPanel({

renderTo:"hello",

title:"用户信息录入框",

url:"person.ejf",

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:"提交",

handler:function(){

f.form.submit({

waitTitle:"请稍候",

waitMsg:"正在提交表单数据，请稍候。。。。。。"

});

}},{text:"重置",

handler:function(){

f.form.reset();

}

}]

})

});

３、Field,表单元素

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

　　Field组件一般包括一个fieldLabel属性及name属性。fieldLabel是在Component中定义的，用来定义字段的元素。

４、表单动作Ext.form.Action

　　表单动作包括表单内容提交Submit，表单数据加载Load两种。默认情况下都是通过Ajax的方式向服务器端发送数据，提交表单数据或加载表单中的内容。

　　关于表单动作Action，我们将在后面的课程中讲解。

5、表单布局：

FieldLabel要显示出来需用form布局才行，无论创建的是否是formpanel

当在前台传递来的是日期格式，在后台接受时，要日期格式化，用：String borth=request.getParameter(“borthDay”);

SimpleDateFormat sdf= new SimpleDateFormat(“yyyy-MM-dd”); person.setBorth(sdf.parse(borth));

调用存储过程，如：CallableStatement psd=null;

psd=conn.prepareStatement(“insert into user value(user_sequence.nextval,?,?,?)”);

Psd=conn.prepareCall(“{call adduser(?,?,?,?)}”);

Pstmt.setDate(2,new java.sql.Date(user.getBirth().getTime()));

转载于:https://www.cnblogs.com/smilings/archive/2013/02/21/2919932.html

weixin_34239592

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs 总结

Ext.get(id) 所得到的是一个Ext.element类的一个实例，其方法、属性如下：var el=new Ext.Element(“<font>sd</font>”);Ext.get(id).toggle(true); //动画地显示和隐藏 Ext.get(id).addClass(“myclass”); //增加样式Ex...
复制链接

扫一扫