包含实用extjs100例的词条

本文目录一览：

• 1、extjs实用开发指南
• 2、extjs怎么获取后台的数据或者是变量。。。求大神速回？
• 3、ExtJS是什么，一位学长说的，对这个从未听说
• 4、extjs怎样做图片上传

extjs实用开发指南

以下是extjs.org.cn收集的一些ExtJS可视化开发工具.你是不是非常喜欢ExtJs,但又已经厌烦了写代码的方式,喜欢用拖拉即可以完成ExtJs的设计.赶快来试用一下这些最新的产品.

ExtJS 在线可视化开发工具 – Ext 2.1.0 Gui Designer

Ext JS 可视化开发工具 – extbuilder

Ext JS 3.0 可视化开发工具预览

ExtJS 在线可视化开发工具 – Formbuilder

你直接来这看

很多东西

extjs怎么获取后台的数据或者是变量。。。求大神速回？

1. 使用form表单提交

使用表单提交是调用了表单的submit方法，其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。

var myform = Ext.create(‘Ext.form.Panel’,{undefined

defaultType: ‘textfield’,

items:[{undefined

fieldLabel : ‘Name’,

name : ‘name’

},{undefined

fieldLabel: ‘Gender’,

name : ‘gender’

},{undefined

fieldLabel : ‘Age’,

name: ‘age’

}],

buttons: [{undefined

text : ‘load’,

handler : function(){undefined

this.up(‘form’).getForm().submit({undefined

url: ‘/request/userinfo’,

method : ‘POST’,

success : function(form, action){undefined

console.log(form);

Ext.Msg.alert(‘title’, ‘load success’);

});

}]);

2. 使用Ajax异步提交

将上述handler方法中的内容换成一下代码即可。在Ajax的request方法中是一个配置对象，其配置参数包括url，type，params。其中params表示要提交的参数，在此例中是从form表单中通过getValues()方法获得的。该种方式也能将参数一JSON的方式提交到后台，与一个对象匹配。

var values = this.up(‘form’).getForm().getValues();

Ext.Ajax.request({undefined

url:’/request/userinfo’,

headers : {undefined’userHeader’: ‘userMsg’},

type:’POST’,

params:values,

success:function(response){undefined

var data = response.responseText;

console.log(data);

console.log(“success”);

},

});

3. 使用Ext.data.Store

在项目中经常需要通过提交一些数据来从后台获取相应的信息。例如，在表单中输入某个人的id和name就可以查出它的相关信息并在前台显示。一个关于extjs的例子如下：

//data Model

Ext.define(‘User’,{undefined

extend: ‘Ext.data.Model’,

fields: [{name:’name’,type:’string’},

{name:’gender’,type:’string’},

{name:’age’,type:’string’}

]

});

var userStore = Ext.create(‘Ext.data.Store’,{undefined

model: ‘User’,

pageSize: 20,

// autoLoad : true,

proxy: {undefined

type : ‘ajax’, //提交数据的方式

url : ‘/request/userinfo’,

reader : { //以json的形式读取将要提交的数据

type : ‘json’,

root : ‘resultList’

},

writer : {undefined

type : ‘json’

},

actionMethods : {undefined

create : ‘POST’

}

},

});

//grid Panel

Ext.create(‘Ext.grid.Panel’,{undefined

store: userStore,

columns: [

{header : ‘Name’, dataIndex : ‘name’},

{header : ‘Gender’, dataIndex : ‘gender’},

{header : ‘Age’, dataIndex : ‘age’}

],

height: 200,

width: 400,

renderTo: ‘div2’

});

//form Panel

var myform = Ext.create(‘Ext.form.Panel’,{undefined

defaultType: ‘textfield’,

items:[{undefined

fieldLabel: ‘Name’,

name: ‘name’

},{undefined

fieldLabel: ‘Gender’,

name: ‘gender’

},{undefined

fieldLabel : ‘Age’,

name : ‘age’

}],

buttons: [{undefined

text: ‘load’,

handler: function(){undefined

var values = this.up(‘form’).getForm().getValues();

console.log(values);

userStore.proxy.extraParams=values;

userStore.loadPage(1);

}

}

});

在handler方法中获取form表单的参数后，赋值给userStore.proxy.extraParams，然后调用userStore.loadPage(1)。调用loadPage()方法时，会委托给proxy对象去后台获取数据。所以对proxy的配置是核心。使用这个方式从后台获取数据时，后台接口返回的对象应该包括一个List字段，list中包含所需要的具体信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {undefined

}

UserInfoResp应该像这样有一个List字段

class UserInfoResp {undefined

ListUser resulltList;

}

ExtJS是什么，一位学长说的，对这个从未听说

1.extja是什么？

答： ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。

功能丰富，无人能出其右

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。

自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。

呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。），也没有默认的统计功能，也不支持excel，pdf等导出数据。另外fins说，通过测试ecside的效率明显优于ext呢。:)

[编辑本段]Ext发展史

1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明 大家对它的热情，很多人把它投入项目人并不十分了解它。分析人士打了一比喻：就好比尚未谋面， 并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。

2、在2006年初 ，Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以” yui-ext” 的名义下发布。

3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码，根据这名字（下开放源代码DSB许可）。在年底之前，这个库已大受欢迎, 名字被简化为Ext，反映了它作为一个框架的成熟和独立。

该公司成立于2007年初，Ext现在为双执照，使用LGPL和一个商业执照。

4、在2007年4月1日，发布1.0正式版。

5、直至今日(2008年4月1日)ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，现在的版本为Ext-3.0

6、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。

7、2009年5月4日，Ext的3.0 版本发布。

[编辑本段]什么是EXT

1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

[编辑本段]ExtJs UI Engine简介

ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！

ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的厂家包括IBM、Adobe、Cisco和更多。ExtJs官方网站

[编辑本段]Ajax主流框架与ExtJS

JQuery、 Prototype和YUI都属于非常核心的JS库。虽然YUI，还有最近的JQuery，都给自己构建了一系列的UI器件（Widget），不过却没有一个真正的整合好的和完整的程序开发平台。哪怕是这些低层的核心库已经非常不错了，但当投入到真正的开发环境中，依然需要开发者做大量的工作去完善很多缺失之处。而Ext就是要填补这些缺口。主流开源框架中只有Dojo像Ext一样，尝试着提供整合的开发平台。相比Dojo这个出色的工具包，我们认为 Ext能提供一个粘合度更高的应用程序框架。Ext的各个组件在设计之时就要求和其它Ext组件组合一起工作是无缝合作的。这种流畅的互通性，离不开一个紧密合作的团队，还必须时刻强调设计和开发这两方面目标上的统一，而这点是很多开源项目未能做到的。从构建每一个组件开始，我们始终都强调组件的外观、性能、互通性和可扩展性，而我们认为组件已经达到了这几点的要求。

Ext绝对可以单独使用。实际上，除了有特定的要求，推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。我们也支持与jQuery、 YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是它们已具备了一些特定的器件而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层来实现History控件，这样一来的话也可免去Ext自身底层库，从而减少了整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，你可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo、Ajax.NET，或其它JS库转变为 Ext的底层。

Ext从2.x开始收费，这给他的应用前景带来一些问题。不过对国内开发人员的影响不大，毕竟是客户付款。

[编辑本段]Ext学习及应用经验小结

一、理解Html DOM、Ext Element及Component

要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。

Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。

无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。

仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。

对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。

在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。

在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如：

var view=new Ext.Viewport();//创建了一个组件Component

view.el.setOpacity(.5);//调用Element的setOpacity方法

view.el.dom.innerHTML=”Hello Ext”;//通过Element的dom属性操作DOM对象

再看下面的代码：

var win=new Ext.Window({id:”win1″,title:”我的窗口”,width:200,height:200});

win.show();

var c=Ext.getCmp(“win1”);//得到组件win

var e=Ext.get(“win1”);//根据id得到组件win相应的Element

var dom=Ext.getDom(“win1”);//得到id为win1的DOM节点

二、熟悉ext组件体系

Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。

在《ExtJS实用开发指南》中，有如下面一幅组件图：

通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性。

三、掌握核心控件

控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。

同样的道理，对于Ext的表单字段来说，不管是ComboBox，NumberField、还是DateField，他们其它都是 Ext.form.Field类的子类，在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时，一定要重点研究Field这个类，掌握他的主要方法、事件等，就能有助于更好的学习使用其它的字段。

四、学习及研究示例

由于javascript语言非常灵活，不像静态强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同的人就有不同的编程风格。在实际应用开发中，只有见多识广，才能在自己的在脑中建立一个开发库。

学习别人的示例对于我们开发帮助会非常大，示例包括基本组件的应用、综合应用等多个方面。在此，简单推荐几个。

1、Ext官方示例，在ext项目下载包的examples目录中，包括各个控件的基本应用演示，同时还有一些比较复杂的组合示例，有简有繁，非常适合初学者认真研究。

2、Vifir推出的示例，Vifir推出的一些示例主要包括两类，一种是开源的示例应用，另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统，这个一个集合了前后台技术的ext综合示例，而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。

3、其它示例，在ext社区中还有很多比较优秀的ext应用示例，有些只是一个应用演示，虽然没有提供源码下载，但我们可以直接下载引用的js文件来得到这些示例的ext应用代码，同样能取起到非常好的学习效果。

五、多运用

Ext看起来是非常简单的东西，稍有点编程知识的人，按照《ExtJS实用开发指南》中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext的组件的工作原理及机制，才能编写出高级的Ext的应用。

六、熟读Ext项目的源代码

如果要想深入应用Ext，那么阅读Ext项目的源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中，我们经常根据项目的需要对Ext组件进行扩展，设计自己的组件或控件，而如何实现一个自定义的Ext组件，我们可以从Ext的各个组件源代码中找到答案。

Ext的源代码在Ext项目的source目录。读Ext源码，并不一定非要从某一个地方开始，而组件核心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的； core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候，最好能简单看一看这个控件的源代码。

2.extjs应该很少应用吧 我做jsp的，从来就没有用过这些东西·

extjs怎样做图片上传

1.代码如下：

复制代码

1 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

2 html xmlns=””

3 head

4 title/title

5 !–ExtJs框架开始–

6 script type=”text/javascript” src=”/Ext/adapter/ext/ext-base.js”/script

7 script type=”text/javascript” src=”/Ext/ext-all.js”/script

8 script src=”/Ext/src/locale/ext-lang-zh_CN.js” type=”text/javascript”/script

9 link rel=”stylesheet” type=”text/css” href=”/Ext/resources/css/ext-all.css” /

10 !–ExtJs框架结束–

11 script type=”text/javascript”

12 Ext.onReady(function () {

13 //初始化标签中的Ext:Qtip属性。

14 Ext.QuickTips.init();

15 Ext.form.Field.prototype.msgTarget = ‘side’;

16 //创建div组件

17 var imagebox = new Ext.BoxComponent({

18 autoEl: {

19 style: ‘width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px’,

20 tag: ‘div’,

21 id: ‘imageshow’,

22 html: ‘暂无图片’

23 }

24 });

25 //创建文本上传域

26 var file = new Ext.form.TextField({

27 name: ‘imgFile’,

28 fieldLabel: ‘文件上传’,

29 inputType: ‘file’,

30 allowBlank: false,

31 blankText: ‘请浏览图片’

32 });

33 //提交按钮处理方法

34 var btnsubmitclick = function () {

35 if (form.getForm().isValid()) {

36 form.getForm().submit({

37 waitTitle: “请稍候”,

38 waitMsg: ‘正在上传…’,

39 success: function (form, action) {

40 Ext.MessageBox.alert(“提示”, “上传成功！”);

41 document.getElementById(‘imageshow’).innerHTML = ‘img style=”width:150px;height:150px” src=”‘ + action.result.path + ‘”/’;

42 },

43 failure: function () {

44 Ext.MessageBox.alert(“提示”, “上传失败！”);

45 }

46 });

47 }

48 }

49 //重置按钮”点击时”处理方法

50 var btnresetclick = function () {

51 form.getForm().reset();

52 }

53 //表单

54 var form = new Ext.form.FormPanel({

55 frame: true,

56 fileUpload: true,

57 url: ‘/App_Ashx/Demo/Upload.ashx’,

58 title: ‘表单标题’,

59 style: ‘margin:10px’,

60 items: [imagebox, file],

61 buttons: [{

62 text: ‘保存’,

63 handler: btnsubmitclick

64 }, {

65 text: ‘重置’,

66 handler: btnresetclick

67 }]

68 });

69 //窗体

70 var win = new Ext.Window({

71 title: ‘窗口’,

72 width: 476,

73 height: 374,

74 resizable: true,

75 modal: true,

76 closable: true,

77 maximizable: true,

78 minimizable: true,

79 buttonAlign: ‘center’,

80 items: form

81 });

82 win.show();

83 });

84 /script

85 /head

86 body

87 !–

88 说明：

89 (1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。

90 官方解释如下：

91 This may then be added to a Container as a child item.

92 To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:

93 (2) autoEl: {style: ”,tag: ‘div’,id: ‘imageshow’, html: ‘暂无图片’}定义这个html标记的属性，如 标记为：div，id是多少等。

94 官方实例为：

95 var myImage = new Ext.BoxComponent({

96 autoEl: {

97 tag: ‘img’,

98 src: ‘/images/my-image.jpg’

99 }

100 });

101 (3)var file = new Ext.form.TextField()：创建一个新的文件上传域。

102 (4)name: ‘imgFile’:名称，重要，因为service端要根据这个名称接收图片。

103 (5)inputType: ‘file’：表单类型为文件类型。

104 (6)waitTitle: “请稍候”,waitMsg: ‘正在上传…’,：上传等待过程中的提示信息。

105 (7)document.getElementById(‘imageshow’).innerHTML = ‘img style=”width:150px;height:150px” src=”‘ + action.result.path + ‘”/’;这个是原生态的js，把imageshow的值换成图片。

106 —

107 /body

108 /html

复制代码

其中与service交互用上传图片的 一般处理程序文件，源码如下：

/App_Ashx/Demo/Upload.ashx

复制代码

1 using System;

2 using System.Web;

3 using System.IO;

4 using System.Globalization;

5

6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo

7 {

8 public class Upload : IHttpHandler

9 {

10 public void ProcessRequest(HttpContext context)

11 {

12 //虚拟目录，建议写在配置文件中

13 String strPath = “/Upload/Image/”;

14 //文件本地目录

15 String dirPath = context.Server.MapPath(strPath);

16 //接收文件

17 HttpPostedFile imgFile = context.Request.Files[“imgFile”];

18 //取出文件扩展名

19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower();

20 //重新命名文件

21 String newFileName = DateTime.Now.ToString(“yyyyMMddHHmmss_ffff”, DateTimeFormatInfo.InvariantInfo) + fileExt;

22 //文件上传路径

23 String filePath = dirPath + newFileName;

24 //保存文件

25 imgFile.SaveAs(filePath);

26 //客户端输出

27 context.Response.Write(“{success:true,path:'” + strPath + newFileName + “‘}”);

28 }

29

30 public bool IsReusable

31 {

32 get

33 {

34 return false;

35 }

36 }

37 }

38 }

复制代码

2.效果如下：

无废话extjs

3.说明：

(1)上传域不光可以上传图片，还要以上传其他文件。这里我们以图片为例。

(2)在实际开发中，我们还要对图片格式，大小等进行校验，这个示例测重于上传，没有加入任何校验。