文档库 最新最全的文档下载
当前位置:文档库 › ExtJs入门实例

ExtJs入门实例

ExtJs入门实例
ExtJs入门实例

ExtJs2.0学习系列(1)--Ext.MessageBox

发布时间:2008-8-7

大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章。

个人认为用extjs做后台很不错,布局比较完美!

1.Ext.MessageBox.alert()方法

有四个参数,为简单起见,主要介绍前面三个参数:

alert( title , msg , function(){} )

其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发。

Ext.MessageBox.alert("title","msg");

Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出!")});

2.Ext.MessageBox.confirm()方法

基本上同alert()方法一模一样。

注意这点:

Ext.MessageBox.confirm("title","msg",function(e){alert(e);});

这个参数e是什么?它是你点击的弹出框的按钮的值,三种值:

yes,no,cancel.Alert()方法也是如此,不过只有两种值:ok,cancel.

3.Ext.MessageBox.prompt()方法

有六个参数,比前面alert方法多一个返回值和是否多行。

Ext.MessageBox.prompt("title","msg");

Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text );});

//输入"qianxudetianxia",点击ok按钮,弹出ok-qianxudetianxia

Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text );},this,true);

//true为多行,this表示作用域

4.Ext.MessageBox.show()方法

功能很强大,采用config配置形式,比前面的方法使用更方便。

参数很多,在此列举最常用的配置参数:

1.animEl:对话框弹出和关闭时的动画效果,比如设置为“id1”,则从id1处弹出并产生动画,收缩则相反

2.buttons:弹出框按钮的设置,主要有以下几种:Ext.Msg.OK,

Ext.Msg.OKCANCEL,

Ext.Msg.CAMCEL,

Ext.Msg.YESNO,

Ext.Msg.YESNOCANCEL

你也可以自定义按钮上面的字:{"ok","我本来是ok的"}。

若设为false,则不显示任何按钮.

3.closable:如果为false,则不显示右上角的小叉叉,默认为true。

4.msg:"消息的内容"

5.title:"标题"

6.fn:关闭弹出框后执行的函数

7.icon:弹出框内容前面的图标,取值为https://www.wendangku.net/doc/204821457.html,,

Ext.MessageBox.ERROR,

Ext.MessageBox.WARNING,

Ext.MessageBox.QUESTION

8.width:弹出框的宽度,不带单位

9.prompt:设为true,则弹出框带有输入框

10.multiline:设为true,则弹出框带有多行输入框

11.progress:设为true,显示进度条,(但是是死的)

12.progressText:显示在进度条上的字

13.wait:设为true,动态显示progress

14.waitConfig:配置参数,以控制显示progress

example:

Ext.MessageBox.show({

title:"标题",

msg:"内容的消息",

buttons:{"ok":"我不再显示OK了"},

fn:function(e){alert(e);},

animEl:"test1",

width:500,

icon:https://www.wendangku.net/doc/204821457.html,,

closable:false,

progress:true,

wait:true,

progressText:"进度条"

// prompt:true

// multiline:true

});

4.Ext.MessageBox.show()中的进度条的使用

首先必须知道例外两个方法Ext.MessageBox.hide()和

Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),

注意value为0-1之间的数,表示进度条的进度.

第一种:(通过进度的大小控制进度,满进度为1)

Ext.get("btn1").on(

"click",

function(){

Ext.MessageBox.show({

title:"df",

msg:"dfd",

progress:true,

width:300,

closable:true

});

var f=function(v){

return function(){

if(v==12)

{

Ext.MessageBox.hide();

//alert("加载完成!");

}

else

{

var i=v/11;

Ext.MessageBox.updateProgress(i,Math.round(100*i)+ "% completed",i);

}

}

}

for(var i=1;i<13;i++)

{

setTimeout(f(i),i*500);//从点击时就开始计时,所以500*i 表示每500ms就执行一次

}

}

);

第二种:(通过固定时间控制进度加载)

Ext.get("btn1").on(

"click",

function(){

Ext.MessageBox.show({

title:"时间进度条",

msg:"5s后关闭进度框",

progress:true,

width:300,

wait:true,

waitConfig:{interval:600},//0.6s进度条自动加载一定长度

closable:true

});

setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数

}

最后关于那个waitConfig的参数,在此说明下:

1.interval:进度的频率

2.duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失。

3.fn:duration的时间到后执行的函数

所以,上面的通过时间控制进度另外一种写法为:

Ext.get("btn1").on(

"click",

function(){

Ext.MessageBox.show({

title:"时间进度条",

msg:"5s后关闭进度框",

progress:true,

width:300,

wait:true,

waitConfig:{

interval:600,

duration:5000,

fn:function(){

Ext.MessageBox.hide();//让进度条消失 }},

closable:true

});

//setTimeout(function(){Ext.MessageBox.hide()},5000); }

);

效果一样。

MessageBox类暂且就说这么多!一起期待下一章...

ExtJs2.0学习系列(2)--Ext.Panel

发布时间:2008-8-7

上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢!

今天介绍extjs中的Panel组件。

//html代码

//js代码

var p = new Ext.Panel({

title: 'My Panel',//标题

collapsible:true,//右上角上的那个收缩按钮,设为false则不显示 renderTo: 'container',//这个panel显示在html中id为container 的层中

width:400,

height:200,

html: "

我是内容,我包含的html可以被执行!

"//panel主体中的内容,可以执行html代码

});

因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。

//配置参数(只列举部分常用参数)

1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据

2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false

3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false

4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],

5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏

topToolbar'}],

6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]

7.buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为right

8.collapsible:设为true,显示右上角的收缩按钮,默认为false

9.draggable:true则可拖动,但需要你提供操作过程,默认为false

10.html:主体的内容

11.id:id值,通过id可以找到这个组件,建议一般加上这个id值

12.width:宽度

13.height:高度

13.title:标题

14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.

15.applyTo:(id)呈现在哪个html元素里面

16.contentEl:(id)呈现哪个html元素里面,把el内的内容呈现

17.renderTo:(id)呈现在哪个html元素里面

//关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):

英文如下(本人英语poor,不敢乱翻译):

contentEl - This config option is used to take existing content and p lace it in the body of a new panel. It is not going to be the actual panel itself. (It will actually copy the innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-di splay CSS class to prevent a brief flicker of the content before it i s rendered to the panel.

applyTo - This config option allows you to use pre-defined markup to create an entire Panel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements must be in the correct order /hierarchy. Any components which are not found and need to be created will be autogenerated.

renderTo - This config option allows you to render a Panel as its cre ated. This would be the same as saying myPanel.render(ELEMENT_TO_REND ER_TO);

哪位大人帮忙翻译下...

考虑到入门,方法事件会在以后的文章中以实例穿插。

1.可拖动的panel实例

下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件.

//html代码

..无..

//下面创建一个允许拖动的panel,但是拖动的结果不能保存

var p=new Ext.Panel({

title: 'Drag me',

x: 100,

y: 100,

renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel 的位置

floating: true,//true

frame: true,//圆角边框

width: 400,

height: 200,

draggable:true

}).show();//在这里也可以不show()

但是还不能拖到其他的地方,我们需要改写draggable:

draggable: {

insertProxy: false,//拖动时不虚线显示原始位置

onDrag : function(e){

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);//获取拖动时panel的坐标

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);//移动到最终位置 }

}

实现了可保存的拖动,如图:

拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码:var s = this.panel.getEl().shadow;

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeig ht());

}

//shadow的realign方法的四个参数,改变shadow的位置大小属性

最后这个可拖动的panel的代码为:

var p=new Ext.Panel({

title: 'Drag me',

x: 100,

y: 100,

renderTo: Ext.getBody(),

floating: true,

frame: true,

width: 400,

height: 200,

draggable: {

insertProxy: false,

onDrag : function(e){

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);

var s = this.panel.getEl().shadow;

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeig ht());

}

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);

}

}

})

//效果图片我就不贴出来了

2.带顶部,底部,脚部工具栏的panel

var p=new Ext.Panel({

id:"panel1",

title:"标题",

collapsible:true,

renderTo:"container",

closable:true,

width:400,

height:300,

tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏

bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏

html:"内容",

buttons:[{text:"按钮1"},{text:"按钮2"}] //footer部工具栏

});

我们已经在各种工具栏上添加了按钮,但是却没有激发事件,下面我们来添加按钮事件代码:

tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}],

//改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了

当然,一般情况下,我们只要一个工具栏,这里只是为了演示!

3.panel工具栏

//添加下面的代码到panel配置参数中

tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function (){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],

//id控制按钮,handler控制相应的事件

//id的枚举值为:

toggle (collapsable为true时的默认值)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

关于panel今天就讨论到这里,欢迎批评!一起期待下一片文章.

ExtJs2.0学习系列(3)--Ext.Window

发布时间:2008-8-7

?上一篇文章:ExtJs2.0学习系列(2)--Ext.Panel

?下一篇文章:ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window 组件,它继承自panel。

先介绍个最简单例子

//html代码

//js代码

var w=new Ext.Window({

contentEl:"win",//主体显示的html元素,也可以写为el:"win" width:300,

height:200,

title:"标题"

});

w.show();

参数介绍:

因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数

//几个前面没有介绍的window自己的配置参数

1.closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口 hide,关闭后,只是hidden窗口

2.closable:true在右上角显示小叉叉的关闭按钮,默认为true

3.constrain:true则强制此window控制在viewport,默认为false

4.modal:true为模式窗口,后面的内容都不能操作,默认为false

5.plain://true则主体背景透明,false则主体有小差别的背景色,默认为false

//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的w.show()

实例介绍:

1.嵌套了tabpanel的window

var w=new Ext.Window({

contentEl:"win",

width:300,

height:200,

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();

我们通过items把TabPanel组件嵌套在window的主体中去了。

我们在添加工具栏看看

// bbar:[{text:"确定"},{text:"取消

",handler:function(){w.close();}}],//bottom部

buttons:[{text:"确定"},{text:"取消

",handler:function(){w.close();}}],//footer部

buttonAlign:"center",//footer部按钮排列位置,这里是中间

// collapsible:true,//右上角的收缩按钮

其他工具栏方法一样。

关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明。今天的内容比较少,请高手pp,让我们期待下篇文章!

ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

发布时间:2008-8-7

?上一篇文章:ExtJs2.0学习系列(3)--Ext.Window

?下一篇文章:ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel 组件的使用。

首先弄清楚这个问题,创建的时候:

//查看源代码便知,两种方法是一样的

Ext.form.FormPanel = Ext.FormPanel;

我们还是从最简单的代码实例开始吧:

//js代码

var form1 = new Ext.form.FormPanel({

width:350,

frame:true,//圆角和浅蓝色背景

renderTo:"form1",//呈现

title:"FormPanel",

bodyStyle:"padding:5px 5px 0",

items:[

{

fieldLabel:"UserName",//文本框标题

xtype:"textfield",//表单文本框

name:"user",

id:"user",

width:200

},

{

fieldLabel:"PassWord",

xtype:"textfield",

name:"pass",

id:"pass",

width:200

}

],

buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}]

});

都是通过items属性参数把表单元素添加到这个表单中。

我们发现两个文本框的类型和狂度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:

//简化代码,和上面的代码效果一样

var form1 = new Ext.form.FormPanel({

width:350,

frame:true,

renderTo:"form1",

title:"FormPanel",

bodyStyle:"padding:5px 5px 0",

defaults:{width:200,xtype:"textfield"},//*****简化****//

items:[

{

fieldLabel:"UserName",

//xtype:"textfield",

name:"user",

id:"user",

//width:200

},

{

fieldLabel:"PassWord",

//xtype:"textfield",

name:"pass",

id:"pass",

inputType:"password",

//width:200

}

],

buttons:[{text:"确定"},{text:"取消

",handler:function(){alert();}}]

});

关于inputType,参数如下:

//input的各种类型(这个大家都知道,就只列了几个典型的)

radio

check

text(默认)

file

password等等

关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:https://www.wendangku.net/doc/204821457.html,belAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"

https://www.wendangku.net/doc/204821457.html,belWidth:fieldlabel的占位宽

3.method:"get"或"post"

4.url:"提交的地址"

5.submit:提交函数//稍后我们一起详细分析

因为内容太多,我们先看一个例子。

1.FormPanel的fieldset应用

//把前面代码重写items属性

items:[

{

xtype:'fieldset',

title: '个人信息',

collapsible: true,

autoHeight:true,

width:330,

defaults: {width: 150},

defaultType: 'textfield',

items :[{

fieldLabel: '爱好',

name: 'hobby',

value: 'https://www.wendangku.net/doc/204821457.html,'

},{

xtype:"combo",

name: 'sex',

store:["男","女","保密"],//数据源为一数组

fieldLabel:"性别",

emptyText:'请选择性别.'

}]

}

]

这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内

容中详细探讨。

2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:

Form components

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

form Ext.FormPanel

checkbox Ext.form.Checkbox

combo https://www.wendangku.net/doc/204821457.html,boBox

datefield Ext.form.DateField

field Ext.form.Field

fieldset Ext.form.FieldSet

hidden Ext.form.Hidden

htmleditor Ext.form.HtmlEditor

label https://www.wendangku.net/doc/204821457.html,bel

numberfield Ext.form.NumberField

radio Ext.form.Radio

textarea Ext.form.TextArea

textfield Ext.form.TextField

timefield Ext.form.TimeField

trigger Ext.form.TriggerField

不早了,FormPanel还有很多的东西要了解,但是今天不能再讲了,太多了,大家都没有兴致看下去,明天继续。

extjs的东西很庞大,但是还没有一个人用中文系统的分析写文章,所以资料都很可贵,现在我想做这件事,请大家多多支持,我才有动力,

才有激情,才能写出更好的下一片文章,让我们期待更精彩的next吧!

ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

发布时间:2008-8-7

?上一篇文章:ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

?下一篇文章:ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox 篇)

上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去,说全一点,说深一点。

3.可选的fieldset实例

其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点:

//因为觉得这个参数特别,特举一例以说明

1.checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false

2.checkboxName:string//当上面为true时,作为checkbox的name,方便表单操作

这里我把js核心代码贴出来(html代码与上一篇中完全相同,不列出):

//在上一节的基础代码的items里面添加如下配置

{

xtype:"fieldset",

checkboxToggle:true,//关键参数,其他和以前的一样checkboxName:"dfdf",

title:"选填信息",

defaultType:'textfield',

width:330,

autoHeight:true,//使自适应展开排版

items:[{

fieldLabel:"UserName",

name:"user",

anchor:"95%"//330px-labelWidth剩下的宽度的95%,留下5%作为后面提到的验证错误提示

},

{

fieldLabel:"PassWord",

inputType:"password",//密码文本

name:"pass",

anchor:"95%"

}]

}

4.表单验证实例(空验证,密码确认验证,email验证)

我们可以用单独的js写表单验证,但是extjs已经为我们想到了(自己单独写反而不方便)。

在验证之前,我不得不提两个小知识点:

//大家在很多的extjs代码中都看到了这两个,他们都起提示作用的

Ext.QuickTips.init();//支持tips提示

Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)

//side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证

//大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady 的function(){}中)

1.我们看一个最简单的例子:空验证(其实这不算是一个专门的验证例子)

//空验证的两个参数

1.allowBlank:false//false则不能为空,默认为true

2.blankText:string//当为空时的错误提示信息

js代码为:

var form1 = new Ext.form.FormPanel({

width:350,

frame:true,

renderTo:"form1",

labelWidth:80,

title:"FormPanel",

bodyStyle:"padding:5px 5px 0",

defaults:{width:150,xtype:"textfield",inputType:"password"}, items:[

{fieldLabel:"不能为空",

allowBlank:false,//不允许为空

blankText:"不能为空,请填写",//错误提示信息,默认为This field is required!

id:"blanktest",

anchor:"90%"

}

]

});

2.用vtype格式进行简单的验证。

在此举邮件验证的例子,重写上面代码的items配置:

items:[

{fieldLabel:"不能为空",

vtype:"email",//email格式验证

vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了

id:"blanktest",

anchor:"90%"

}

你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:

//form验证中vtype的默认支持类型

1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)

2.alphanum//只能输入字母和数字,无法输入其他

3.email//email验证,要求的格式是"langsin@https://www.wendangku.net/doc/204821457.html,"

Extjs4.0.7 desktop基础搭建

Extjs4.0.7 desktop初级搭建 涉及内容:1.classes.js的拆分 2.App.js和Settings.js里代码的含义 3.桌面图标的换行 4.一些小小的修改 首先上官网上下载最新版本的Extjs,本次讲解以4.0.7版本为例,下载地址https://www.wendangku.net/doc/204821457.html,/products/extjs/download/ext-js-4.0.7/1234 然后打开myeclipse新建一个web project工程,这个工程的结构如下 其中core文件夹用于存放desktop的核心代码 css文件夹用于存放样式表 ext文件夹用于存放ext-all.js等

images文件夹用于存放desktop实例中images modules文件夹用于存放桌面上显示的模块 resources文件夹用于存放desktop实例自带的壁纸文件夹wallpapers 和Extjs中resources下的themes文件夹 接下来把App.js,Settings.js和index.jsp(即desktop.html)放在webroot 目录下面 一.classes.js的拆分:首先来看一下index.jsp中的代码 extjs4 desktop

利用UbuntuExtMail30分钟配置好一个功能强大的邮件

利用Ubuntu ExtMail 30分钟配置好一个功能强 大的 利用Ubuntu ExtMail 30分钟配置好一个功能强大的服务器V1.1,以下文档通过19个大的步骤进行配置,配置成功! 由于网上Ubuntu ExtMail的步骤特别多,看了都头痛,在此特别给朋友们制作了一个简洁的安装文档,希望大家喜欢:) 环境: Ubuntu 8.04 TLS postfix 2.5.1 ExtMail 1.2 extman 1.1 1.安装依赖包 apt-get install mysql-client-5.0 mysql-server apache2 postfix postfix-mysql postfix-doc courier-authdaemon courier-authlib-mysql courier-pop courier-pop-ssl courier-imap courier-imap-ssl libsasl2-modules libsasl2-modules-sql sasl2-bin libpam-mysql openssl libapache2-mod-fastcgi libfcgi-perl build-essential libtool libnet-server-perl libnet-cidr-perl libberkeleydb-perl arc zoo lzop liblzo1 libstdc++5 libgd-gd2-perl libfile-tail-perl libdigest-sha1-perl libdigest-HMAC-perl libnet-ip-perl libnet-dns-perl libhtml-tagset-perl libhtml-parser-perl libio-stringy-perl libio-multiplex-perl libio-socket-ssl-perl libio-zlib-perl libnet-ssleay-perl libunix-syslog-perl libtimedate-perl libmailtools-perl libconvert-binhex-perl libconvert-tnef-perl libconvert-uulib-perl libcompress-zlib-perl libarchive-zip-perl libarchive-tar-perl perl-suid 你会被询问以下问题: Create directories for web-based administration? <– No General type of mail configuration: <– Internet Site System mail name: <– https://www.wendangku.net/doc/204821457.html, 2.下载extmail-1.2和extman-1.1,并修改配置 下载地址:https://www.wendangku.net/doc/204821457.html,/download tar xvzf extmail-1.2.tar.gz

ext入门学习

Ext入门学习 一:Ext是什么 ExtJS是一个javascript框架,用于在客户端创建丰富多彩的web应用程序界面。ExtJS 可以用来开发RIA也即富客户端的AJAX应用。 ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件。 二:Ext能干什么 主要是用来制作富客户端的Web应用。包括但不限于: (1)可以动态创建web组件,动态维护web的Dom对象 (2)灵活地获取界面组件对象,方便对对象的操作和控制 (3)大量的组件对象帮助构建复杂的web应用 (4)友好的Ajax支持 (5)完善的事件处理机制 三:Ext有什么 四:Ext的HelloWorld 1:环境准备 (1)到官网上下载最新的版本,目前是ext-3.3-beta (2)下载后解压后,看看里面的包结构: adapter:负责将里面提供的第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。 build:压缩后的ext全部源码(里面分类存放)。 docs: API帮助文档。 exmaples:提供使用ExtJs技术做出的小实例。 resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。 package:按包分类的源码 source:无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL)开源的协议。Ext-all.js:压缩后的Ext全部源码。 ext-all-debug.js:无压缩的Ext全部的源码(用于调试)。

ext-core.js:压缩后的Ext的核心组件,包括sources/core下的所有类。 ext-core-debug.js:无压缩Ext的核心组件,包括sources/core下的所有类。 (3)开发的时候只需要把resources包中的css和images放到common下面,还有把ext-all.js和adapter/ext/ext-base.js放入到js中就可以了 2:HelloWorld.html 五:Ext的面向对象简介 //相当于Java的package https://www.wendangku.net/doc/204821457.html,space("https://www.wendangku.net/doc/204821457.html,"); //完全使用Ext的创建对象语法太繁琐,还是用我们熟悉的js的语法来写 https://www.wendangku.net/doc/204821457.html,.Class1=function(){ this.aa = "cc"; this.t1=function(){ this.aa="t1"; }; }; https://www.wendangku.net/doc/204821457.html,.Class2=function(){ this.t1=function(){ this.aa="cc2 tt2"; }; }; //表示Class2继承Class1,这里面没有采用Ext的extends https://www.wendangku.net/doc/204821457.html,.Class2.prototype=new https://www.wendangku.net/doc/204821457.html,.Class1();

node.js入门手册:那些最流行的web开发框架 (1)

Node.js 入门手册:那些最流行的Web 开发框架 ?actionHero—actionHero is a minimalist transactional API framework for sockets and http clients ?archetype—A web framework leveraging Node.js ?aries—Annotation based MVC framework ?blueprint—Blueprint for a Startup. Middleware, & MVC routing over Node.js & Mongoose ?broke—A porting of the most famous Django Web Framework ?Capsela—A high-level, promises-based web framework with an emph asis on testability (see website) ?Cargobox—Express port with better OOP ?chain—An evented convention for building Node Applications (Stopped Development, for ejsgi) ?Coffeemate—Push coffee-script into web development! ?COKE—A lightweight MVC framework base on Express that speeds up your web development. (Rails like) ?CompoundJS (formerly RailwayJS) —An MVC web framework, similar t o Ruby on Rails, Express/Connect-compatible. Also see here. ?Crux—An MVC web application framework and project management uti lity, similar in some ways to Rails. ?Derby—MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers ?djangode—A framework that borrows some useful concepts from Djang o (March 2010, node.JS 0.1.30) ?drty—A Django port to NodeJS. Many Django features, still under hea vy development. (January, 2011, 0.2.6) ?Drumkit --- DrumKit is a plugin-powered, full-stack Web development fr amework for Node.js. ?Express—A robust feature rich web development framework inspired by Sinatra ?Express Train—An lightweight MVC web framework built on top of exp ress, offering consistent project structure. ?Ext Core for NodeJS—Templating and some basic tricks of ExtCore an d ExtJS(XTemplate,Ext.util.format) ?Flatiron—an adaptable framework for building modern web applications. URL Routing with Director, templating with Plates, data management wit h Resourceful, middleware with Union (connect-compatible), plugins with B roadway, logging with Winston. ?Geddy—A hackable Web-app development framework similar to Merb /Rails/Pylons/Django ?GenJi—A simple micro-framework for nodejs.

ext3、ext4 orphan inode机制分析

ext3、ext4的orphan inode机制分析 一、概述 orphan在英文中是孤儿的意思,在这里取被遗弃、被删除之意。 orphan inode是什么样的inode呢?这种inode是怎样产生的呢? 先介绍一个概念,文件的引用计数,准确地说应该是inode的引用计数,因为一般来说一个文件会对应 一个inode。文件的引用计数,简单地说是表示有多少个文件指向该文件,准确地说是文件的硬链接的个数。 情况1:设想一个进程,open一个文件,然后unlink该文件,然后进行文件读写。这是允许的,并且在进程退出时,内核会自动将引用计数为0的文件删除。 但是如果该进程尚未退出之前,系统崩溃了,那么,内核就没有机会将已被unlink、并且引用计数为0 的inode从磁盘上删除了。 情况2:设想我们正在截断一个大文件(系统调用truncate),但是操作尚未完成,系统就崩溃了。同样,内核也没有办法将该文件的所有数据块全部删除了。 ext3、ext4的orphan inode机制就是处理上述两种情况的。基本思想是这样的:如果要删除或截断一个inode,要先把这个inode记录到磁盘上的一个特殊的orphan inode链表上。如果删除或截断操作能够 正常完成,那么,就从磁盘上的orphan inode链表上删除该inode;否则,如果删除或截断操作未完成之前,系统就发生崩溃了,那么,系统重启后,文件系统会遍历磁盘上的orphan inode链表,对链表上的每一个inode都重新进行一遍删除或截断操作,以此来保证这些inode真正在磁盘上被删除,维护文 件系统的一致性。 内核版本:2.6.35 二、相关数据结构及之间的关系 先总体说一下orphan inode的组织。 orphan inode需要在两个地方组织,分别是在内存中和在磁盘上。不论在哪里,从抽象角度来看,orphan inode都被组织成一个单向链表。 1、ext4_inode struct ext4_inode { __le32 i_dtime; /* Deletion Time */ ......... } 这个是磁盘上的inode的结构,i_dtime本来表示该inode被删除的时间,在orphan inode机制中,因 为此时该域的值并不重要,故借用一下,用于记录下一个被unlink/truncate的inode号。

非常好的gwt-ext培训教程

Gwt-Ext 的概述 GWT-Ext 是基于Google Web Toolkit(GWT)和ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯Java 语言的富Internet 应用的快速开发。本系列文章将详细讲解GWT-Ext 的基本结构和功能特点,并通过代码示例来演示该技术的具体实现。本文是该系列的第一部分,将带领您快速入门GWT-Ext,并演示如何快速搭建GWT-Ext 的开发环境。 概述 GWT-Ext 是基于Google Web Toolkit(GWT)和ExtJs 的功能强大的网页开发控件库。它扩展了GWT,在ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度可定制的组合下拉框(Combobox)、目录、对话框、表单(Form)以及功能丰富、强大且易用的API。GWT-Ext 拥有GNU Lesser General Public Licence (LGPL)(请参阅参考资料),V3.0 的许可证。因此它是一个非常灵活,允许在开源和商业中应用的控件库。 GWT 的介绍(请参阅参考资料)已经非常丰富,我们这个系列主要关注在GWT-Ext 的介绍和应用上。GWT-Ext 是在GWT 和ExtJs 的基础上对表现层的进一步封装。我们可以理解GWT 提供了Ajax 的一套基础框架,而ExtJs 提供了以JavaScript 和CSS 样式表为基础的非常丰富的表现层接口。那么GWT-Ext 就是在GWT 的基础上,将ExtJs 的JavaScript 接口映射或者封装为Java 的接口。在Java 的环境下开发和调试开发表现层,可以大大提高开发的速度。 回页首 GWT-Ext 开发环境搭建 在这个系列中,将通过示例的方式,一步步地介绍如何搭建一个GWT-Ext 的开发环境。本章将通过图解与代码结合的方式搭建演示平台框架,并且演示如何部署这个平台到Tomcat 容器中。 下载开发环境 我们将使用Eclipse 和插件Cypal Studio 来搭建控件演示平台。Cypal Stutio 是一个GWT 成熟的开发工具。它能非常方便地帮助我们搭建GWT 的开发以及调试环境,并且能够实现编译和打包的工作,省去了开发GWT 过程中很多繁琐的过程。 需要下载的产品和技术请参阅参考资源中的“获得产品和技术”部分。 安装Cypal Studio 插件 解压Eclipse 到本地硬盘,同时解压cypal.studio.for.gwt-1.0.zip 到Eclipse 的plugins 目录下。然后解压下载的gwt-windows-1.5.0.zip 。最后,启动Eclipse 。 选择Eclipse 目录Window >Preferences > Cypal Stutio,填写GWT 相关的信息如图1所示。GWT Home 填写GWT 的解压根目录。如果Java VM 的要求较高,可以从512M 提高到1024M 。如图1 所示。

EXTJS(入门篇10)UsingViewsinyourApplications

Using Views in your Applications 本系列文章为翻译文章,翻译自API文档,也是入门级别的文章,请初学者仔细阅读,如果翻译有不妥的地方,请谅解,如果转载请注明作者及出处。 从用户的角度看,我们的应用程序只不过是视图的集合。尽管大多有价值的部分都在控制器和模型中,但是视图却是和用户直接交互的。在本指导文档中,将就如何构建我们应用程序的视图展开叙述。 Using Existing Components 最简单的方式就是使用Ext.create函数来创建一个已经定义好的组件。例如我们可以创建一个特别简单的panel,仅仅包括一些html内容: 该代码十分简单,只是创建一个全屏的组件,里面包含了一些文字内容。我们可以使用该方法创建任意的内在组件,但是比较实用的方法是,我们创建该组件的子类,以便实现我们自定义: 虽然看起来,结果是相同的,但是我们有了一个我们自己的类,这就是我们需要遵循的模式

—创建已有组件的子类,在我们需要的时候再对它进行实例化。让我们看看这都有些什么变化: 1.Ext.define函数允许我们创建一个新的类,继承我们已经存在的类。 2.我们遵循MyApp.view.MyView的命名规则,尽管我们可以任意命名,但是最好还是 遵循我们的规则,方便以后管理以及程序的简单明了。 3.我们可以再config中定义新的配置项。 我们在定义我们的全新子类的时候,可以使用超类的配置项进行配置,或者在创建的时候,把该类的配置项作为参数传递进去,以便创建: A Real World Example 下面我们来看一个比较规范的视图类文件,是Twitter中的文件:

extjs入门案例大全

Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ])。 var data = [ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'], ['4','name4','descn4'], ['5','name5','descn5'] ]。 var ds = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:'id'}, {name:'name'}, {name:'descn'} ]) })。 ds.load()。 var grid = new Ext.grid.GridPanel({ ds:ds, cm:cm, width:300, height:400, renderTo:'grids', tbar:[ { xtype:'datefield' } ] })。 grid.render()。 })。 Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"第一个

",width:300,height:300,html:'

Hello World

'})。 })。 TabControl Ext.onReady(function(){ new Ext.TabPanel({renderTo:"hello",width:300,height:200,items:[new Ext.Panel({title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]})。 })。 总结: Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"面板", html:'面板内容', height:100, width:200 })。 })。 创建按钮事件: new Ext.Button({ renderTo:"hello", text:"添加", pressed:true, height:30, handler:Ext.emptyFn })。 new Ext.Viewport({ layout:"border", items:[{region:"north",

JAVA.Extjs.Hibernate.Web开发应用免费教程集锦

JAVA/JSP/C++: C++程序设计原理与实践(中文高清电子书) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-645.aspx Visual.C++开发实战宝典(源码+视频) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-767.aspx Visual C++从初学到精通(源码+视频+PPT) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-766.aspx 你必须知道的495个C语言问题(高清pdf电子书) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-731.aspx FreeMarker应用指导(中文PDF电子书) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-708.aspx Java范例开发大全(视频教程+实例源码) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-687.aspx JAVA核心基础视频教程展示 https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-625.aspx JAVA从入门到精通.山寨QQ项目 https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-321.aspx 中国人民银行企业培训视频教程(JAVA方向) https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-499.aspx 7K月薪面试题之交通灯管理系统 https://www.wendangku.net/doc/204821457.html,/bbs/showtopic-382.aspx

ExtJS4.2入门教程

话不多说,进入正题,至于有的人想了解ext的优势神马的,自己百度去吧! 一、exit的配置。(注意:本文讲解的是Ext js4.2.1,不同版本部署的js包名有微小差别) 因为只是简单学习,方便新手入门,咱们只引入3个基本包。 ext-all.css ext-all.js Ext.Base.js 怎么引入? 二、示例。 1.helloworld,呵呵,学习程序嘛,咱们都是从helloworld开始的! 效果:

2.创建一个面板 Ext.onReady(function(){ //创建一个面板 var myPanel = new Ext.Panel({ renderTo:Ext.getBody(), title:'哈哈哈', width:300, height:300, html:'test面板' }); });

效果: 3.创建一个tabpanel var panel = new Ext.TabPanel({ renderTo:Ext.getBody(), width:300, height:200, activeTab:0, items:[new Ext.Panel({ title:"面板1", height:30, html:'面板1内容!' }),new Ext.Panel({ title:"面板2", height:30,

EXTjs入门

入门 环境要求 浏览器 ExtJs支持所有主要的网络浏览器,从IE6到最新版本的谷歌浏览器,在开发调试工程中,我们推荐您使用: 这篇教程假设你使用的是最新版本的谷歌浏览器。如果你没有,花一点时间来安装它,并自己熟悉其开发工具。 服务器 尽管不是必须,我们建议你使用本地网络服务器。由于XHR 在本地文件时大多数浏览器有协议限制。我们建议安装: Apache安装启动后,通过浏览器访问localhost,你应该看到一个Apache启动成功网页。 Ext JS 4 SDK 下载SDK解压到服务器WEB目录的新建文件夹“ExtJS”下,不清楚服务器的WEB目录请参考服务器的手册。这个路径和操作系统有关。一般来说Apache的WEB目录为:

浏览http://localhost/extjs/index.html看到Ext的欢迎页面就算安装成功了。 应用构架 基本结构 尽管不是强制的,下面列出的所有建议应看作是你的指导方针保证您应用是有效组织、可扩展和可维护的。以下是建议的Ext目录结构为:

不要着急立即完成所有这些目录,现在让我们专注开发Ext 应用必要的最少代码。我们将创造一个基本的"Hello Word"应用:称为“Hello Ext”。在您的网页根目录创造下列目录和文件。 将包含Extjs SDK的Extjs文件夹放到helloext目录下。 典型的Ext应用包含单一的Html文档--index.html文件:

下面是应用程序逻辑:---app.js 打开浏览器浏览http://localhost/helloext/index.html。将看到一个面板标题为"Hello Ext",内容为"welcome"。 动态加载 ExtJS4支持延迟-动态加载。例如Ext.create创建了一个Ext.container.Viewport实例。在Ext.create被调用时,加载器首先减产Ext.container.Viewport是否定义。没有定义则

FlowPortal从入门到精通

上海易正信息技术有限公司 FlowPortal从入门到精通 修订版 Martin Quan 2013/7/5 FlowPortal教材编写小组欢迎大家提出宝贵意见

第1章FlowPortal基础知识 (5) 1.1队列与查询通知 (5) 1.1.1什么是查询通知 (5) 1.1.2FlowPortal的查询通知机制 (5) 1.1.3初始设定 (6) 1.1.4数据库查询通知功能开启确认 (6) 1.1.5数据库查询通知功能开启 (6) 1.1.6BPM服务器开启查询通知 (7) 1.1.7检查查询通知功能是否正常工作 (7) 1.2草稿 (8) 1.3范本 (8) 第2章产品安装 (8) 2.1系统要求 (8) 2.1.1基础要求 (8) 2.1.2高性能要求 (8) 2.2安装 (8) 2.3升级 (8) 2.4安装中的常见问题 (8) 2.5手动安装 (8) 2.5.1注册BPM Service (8) 2.6单机多系统安装 (9) 2.6.1复制一个BPM服务器环境 (9) 2.6.2BPM服务器配置 (9) 2.6.3企业管理工具 (9) 2.6.4网站配置 (10) 第3章表单设计 (11) 3.1BPM表单的发展与演变 (11) 3.2XForm表单原来 (11) 3.3表单设计入门 (11) 3.3.1制作一个最简单的表单 (11) 3.3.2为表单添加初始值 (11) 3.3.3为表单添加验证 (11) 3.4控件参考 (11) 3.4.1XTextBox (11) 3.4.2XRadioButtonList (11) 3.5表单验证 (11) 3.5.1验证控件 (11) 3.5.2验证组 (11) 3.5.3自定义代码验证 (11)

安卓刷机必看:基础必备全面接触ext3和swap分区大小的问题

【前言】 很多人买HD2,可能是别人推荐,又或者冲着什么电容屏,4.3寸屏幕,1GHz处理能力,很薄。等等,这都没关系。不管为了什么,买就是为打电话的。如果你是新买的,而且没用过Windows Mobile (WM)的手机系统,那么建议先用一到二个月,在网上多转转,再考虑看这篇帖子。(我是新机买来只用了二分钟就刷了,那是因为要试机)由于涉及的内容较多,本人水平也有限,难免有错漏的地方,请各位大大指正。 HD2是原生Windows Mobile 6.5的系统,原生就是出厂的意思,6.5是版本(简称WM6.5)。是Microsoft微软公司开发专门用于智能手机的手机系统之一,是HTC采用Microsoft公司开发WM系统的T 系列产品之一。 那为什么HD能支持Android或者WP7呢? 首先从硬件上看HTC的G系和T系区别不大,G系所采用的Android系统是google公司在Linux内核基础上开发。因此G系和T 系手机相互运行对方系统也有可能。而HD2的WM内核指令集与Linux内核指令集在硬件层面刚好一致。因此运行Android是完全可以的。 为什么要用Android呢? 是因为Android系统使用起来更人性化,大家都喜欢iphone,那是它使用Unix的内核,而Unix内核更贴近于Linux,因而大家知道iphone,Android手机用起来非常简单。 那么我们应该怎么做呢?如何才能用到好用的Android呢!

这里推荐MIUI,MIUI是一个中国原创的Android Rom开发小组,2010年8月16日,首个内测MIUI ROM发布,并迅速引发关注。在历时68天的两轮内测中持续发布了159项贴近用户的细节改进。MIUI ROM与MIUI官方论坛紧密结合,采用独立系统更新模块与测试用户保持亲密联系。MIUI在9月17日发布了全球首个Google Nexus One机型的收音机程序,此项创新受邀加入国际团队CyanogenMod的代码库。MIUI是在Android内核基础上做的新的界面开发。使用简便,是因为MIUI核心是Android系统,这对于新手来说是了解Android系统一个很好的进入点。 【简单了解认知刷机相关常识】 1、什么是ROM? ROM全名为Read Only Memory,通常指安装在手机上的操作系统相当于电脑上的Windows一样 2、什么是刷ROM? 刷ROM即将新的ROM刷入手机,相当于重装系统。ROM部分包含:IPL、SPL、OS、EXTROM、RADIO、STORAGE等,但我们绝大多数人都不会这些包含涉及到核心层面的东西,为了降低刷入的风险。我们只需下载合适的刷机ROM即可 3、什么是SPL,为什么要破解(解锁)? SPL全称SecondProgramLoader,意为第二次装系统,就是负责装载OS操作系统到RAM中,SPL损坏可以通过刷入原始的ROM版本来实现重写SPL,由于手机在出厂的时候对机器内部核心的CID地址

ext基础核心结构

一.ExtJS基础及核心结构 目 录 1.ExtJS简介 (2) 2.ExtJS目录详解 (2) 3.开始第一个ExtJS (3) 4.Ext版HelloWord (3) 4.1 非常有用的Ext开发工具 (5) 5.Ext框架基础及核心简介 (5) 5.1.Ext类库简介 (5) 5.2.Ext的组件 (7) 5.3.组件的使用 (8) 5.4.组件的配置属性 (11) 5.5.ExtJS 组件的事件处理 (12) 任务和总结: (14) 蓝杰 陈九龙 QQ:89715761

1.ExtJS简介 ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用 程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用,下面是一些使用ExtJS开发的 应用程序截图: ExtJS是一个javascript编写的,主要用于创建前端用户界面,是一个与后台技术无关的前端Ajax框架,因此,可以把 ExtJS 用在.Net、java、php等各种开发语言的开发应用中。 2.ExtJS目录详解 要使用ExtJS,首先要得到ExtJS库文件,Ext是一个开源的框架,可以直接从其官方网站下载(网址:https://www.wendangku.net/doc/204821457.html,/products/extjs/download.php ),进入下载页面,下载Ext JS 2.2.1 SDK到本地,解压后的目录如下图所示: adapter:将提供的第三方的低层库(包括Ext自带的底层库)映射为Ext所支持的底层库; air:Ext2.0后版本新增的用于开发桌面应用的一个类库;

build:压缩后的Ext全部源代码(里面分类存放); docs:Ext API帮助文档; examples:使用Ext技术做出的示例; resources:ExtUI资源文件,如css、images文件; source:无压缩的Ext全部源代码(里面分类存放); ext-all.js:压缩后的Ext全部源代码; ext-all-dubug.js:无压缩的Ext全部源代码(用于调试); ext-core.js:压缩后的Ext核心组件,包括source/core下的所有类; ext-core-debug.js:无压缩的Ext核心组件,包括source/core下的所有类 3.开始第一个ExtJS 应用ExtJS需要在页面文件中引入extjs的式样文件及库文件。式样文件为:resources/css/ext-ass.css,extjs的库文件主要有两个:adapter/ext/ext-base.js和ext-all.js.其中ext-base.js表示框架基础库,ext-all.js是extjs的核心库。Adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js换成adapter下面的其它类库如:adapter/jquery/ext-jquery-adapter.js或者 在ExtJS的库文件及页面文件全部加载完毕后,ExtJS会执行Ext.onReady 中指定的函数,因此,一 4.Ext版HelloWord 是不是觉得到了现在,我们还没有看到Ext究竟有什么好处?Ok,下面我们就开始我们地一个真正

Extjs简介

extjs 目录 编辑本段 ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。 呵呵~不过ext也不是万能的,ext没有默认的统计功能,也不支持excel,pdf等导出数据。 编辑本段 Ext发展史 1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展,但后来一度风头盖过其父辈YUI,足以说明大家对它的热情,很多人把它投入项目人并不十分了解它。分析人士打

了一比喻:就好比尚未谋面,并不了解一个人的家庭、教育、品行等背景,只因为他有一副精致漂亮的外观,就对其陷入了疯狂的倾慕之中。因此分析人士建议,在投入项目前,要认真仔细地了解EXT的内在原理和与其他Ajax库不同地方。 2、在2006年初,Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以“yul-ext"的名义下发布。 3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码,根据这名字(下开放源代码DSB许可)。在年底之前,这个库已大受欢迎, 名字被简化为Ext,反映了它作为一个框架的成熟和独立。 该公司成立于2007年初,Ext现在为双执照,使用LGPL和一个商业执照。 4、在2007年4月1日,发布1.0正式版。 5、官方在2009年4月14-16日的首次Ext Conference中发布了Ext 的3.0 RC版本。 6、2009年5月4日,Ext的3.0 版本发布。 7、2010年1月8日,ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户,现在的版本为Ext-3.2.0 8、2010年6月15日,当开发者访问著名的JavaScript库ExtJS网站,会发现自己被重导向到另一个不熟悉的网址和界面sencha。原来,,ExtJS 项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并,后两个项目的创始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此举是ExtJS为了应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措。 编辑本段 什么是EXT 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS 样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

相关文档