ExtJS教程Word格式.docx
《ExtJS教程Word格式.docx》由会员分享，可在线阅读，更多相关《ExtJS教程Word格式.docx（99页珍藏版）》请在冰豆网上搜索。
+"
/小，也要去网上下载，一旦下载失败就显示找不到图片了。
看到这里可能有人奇怪了，为什么examples下的例子没有找不到图片的问题呢？
看来你没有仔细看例子那些代码呢，每个例子都引用了../examples.js。
在examples.js里设置了Ext.BLANK_IMAGE_URL=
'
../../resources/images/default/s.gif'
;
。
所以要解决自己写的例子找不到图片的问题，只需要照examples.js里修改s.gif的本地路径就可以了。
很简单
吧？
1.6.我们还需要什么？
•介于本人对firefox的喜爱，以及firebug在调试js过程中的便利，隆重向您推荐firefox+firebug的开发组合。
再说了ext开发者也都是倾向于firefox开发的，所以一般都是在firefox上跑的好好的，放到ie上就出问题。
这也跟ie自身的问题有些关系，可是目前ie占据90%的浏览器市场，最后我们还是需要让自己的项目在ie上跑起来，所以要求我们能写出跨浏览器的js来。
firebug的好处在于，可以显示动态生成的dom，你甚至可以在firebug
里直接对dom进行修改，而这些修改会直接反应到显示上。
太厉害了
firebug提供的console，可以直接执行js脚本，配置console.debug，
console.info，console.error等日志方法更便于跟踪。
对于ajax发送接收的数据，firebug都可以显示出来，并且可以查看发送的参数，以及返回的状态和信息。
1.7.入门之前，都看helloworld。
为了照顾连最基本应用都跑不起来的同志，我们给出两个入门版helloworld范例，并结合讲解，领你入门呢。
1.7.1.直接使用下载的发布包
•先去
•随便解压缩到什么目录下，不管目录名是什么，最后应该看到里边是这样的目录结构。
•现在我们利用它的目录结构，写一个helloworld例子。
进入上图中的examples目录，新建一个helloworld目录，helloworld
目录下新建一个helloworld.html文件，将下列内容复制进index.html
文件中。
<
link
rel="
stylesheet"
type="
text/css"
href="
../../resources/css/ext-all.css"
/>
scripttype="
text/javascript"
src="
../../adapter/ext/ext-base.js"
>
/script>
../../ext-all.js"
../examples.js"
script>
Ext.onReady（function（）{
Ext.MessageBox.alert（'
helloworld'
'
HelloWorld.'
）;
}）;
•双击helloworld.html打开页面，效果如下：
很高兴的告诉您，咱们的helloworld范例已经正确的执行了，下一步你最好把examples目录下的例子都看一看，再看看里边的代码怎么写的，好好感受一下ext的风范，再继续下去。
1.7.2.只把必要的东西放进项目中
想把ext放入自己的项目，需要自己整理一下，因为发布包里的东西并非都是必要的，比如文档，比如例子，比如源代码。
必要的最小集合是这样：
ext-all.js，adapter/ext/ext-base.js，
build/locale/ext-lang-zh_CN.js和整个resources目录。
•ext-all.js，adapter/ext/ext-base.js就包含了ext的所有功能，所有的js脚本都在这里了。
•build/locale/ext-lang-zh_CN.js是中文翻译。
•resources目录下是css样式表和图片。
自己的项目里只需要包含这些东西，就可以使用ext了。
使用时，在页面中导入：
放
linkrel="
${放置ext的目
录}/resources/css/ext-all.css"
录}/ext-base.js"
录}/ext-all.js"
/>
src="
录}/ext-lang-zh_CN.js"
请注意js脚本的导入顺序，其他的就可以自由发挥了。
第2章震撼吧！
让你知道ext表格控件的厉害。
让你知道ext表格控件的厉害。
2.1.功能丰富，无人能出其右
无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功
能咱们就不提了。
自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。
更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。
），也没有默认的统计功能，也不支持excel，pdf等导出数据。
另外fins说，通过测试ecside的效率明显优于ext呢。
:
）
2.2.让我们搞一个grid出来耍耍吧。
光说不练不是我们的传统，让我们基于examples里的例子，来自己搞一个grid
看看效果，同时也可以知道一个grid到底需要配置些什么东西。
•首先我们知道表格肯定是二维的，横着叫行，竖着叫列。
跟设计数据库，新建表一样，我们要先设置这个表有几列，每列叫啥名字，啥类型，咋显示，这个表格的骨架也就出来了。
ext里，这个列的定义，叫做ColumnModel，简称cm的就是它，它作为整个表格的列模型，是要首先建立起来的。
这里我们建立一个三列的表格，第一列叫编号（code），第二列叫名称（name），第三列叫描述（descn）。
varcm=newExt.grid.ColumnModel（[
{header:
编号'
dataIndex:
id'
},
名称'
name'
]）;
描述'
descn'
}
看到了吧？
非常简单的定义了三列，每列的header表示这列的名称，
dataIndex是跟后面的东西对应的，咱们暂且不提。
现在只要知道有了三列就可以了。
•有了表格的骨架，现在我们要向里边添加数据了。
这个数据当然也是二维了，为了简便，我们学习examples里的array-grid.js里的方式，把数据直接写到js里。
•vardata=[
•['
1'
'
name1'
descn1'
],
2'
name2'
descn2'
3'
name3'
descn3'
4'
name4'
descn4'
5'
name5'
descn5'
]
•];
很显然，我们这里定义了一个二维数据，（什么？
你不知道这是二维数组？
快改行吧，这里不是你该待的地方。
这个有五条记录的二维数组，显示到grid里就应该是五行，每行三列，正好对应这id,name,descn，在我们的脑子里应该可以想像出grid显示的结果了，为了让想像变成显示，我们还需要对原始数据做一下转化。
•因为咱们希望grid不只能支持array，还可以支持json，支持xml，甚至支持咱们自己定义的数据格式，ext为咱们提供了一个桥梁，Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。
现在咱们就来看看这个Ext.data.Store是如何转换array的。
•vards=newExt.data.Store（{
•proxy:
newExt.data.MemoryProxy（data）,
•reader:
newExt.data.ArrayReader（{},[
•{name:
'
•]）
•}）;
•ds.load（）;
ds要对应两个部分：
proxy和reader。
proxy告诉我们从哪里获得数据，
reader告诉我们如何解析这个数据。
现在我们用的是Ext.data.MemoryProxy，它是专门用来解析js变量的。
你可以看到，我们直接把data作为参数传递进去了。
Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行读取三个数据，第一个叫id，第二个叫name，第三个descn。
是不是有些眼熟，翻到前面cm定义的地方，哦，原来跟dataIndex是对应的。
这样cm就知道哪列应该显示那条数据了。
唉，你
要是能看明白这一点，那你实在是太聪明了。
记得要执行一次ds.load（），对数据进行初始化。
有兄弟可能要问了，要是我第一列数据不是id而是name，第二列数据不是name而是id咋办？
嗯，嗯，这个使用就用mapping来解决。
改改变成
这样：
vards
=newExt.data.Store（{
proxy:
newreader:
new
{name:
Ext.data.MemoryProxy（data）,Ext.data.ArrayReader（{},[
mapping:
1},
0},
]）
mapping:
2}
这样如截图所见，id和name两列的数据翻转了。
如此这般，无论数据排列顺序如何，我们都可以使用mapping来控制对应关系，唯一需要注意的
是，索引是从0开始的，所以对应第一列要写成mapping:
0，以此类推。
•哈哈，万事俱备只欠东风，表格的列模型定义好了，原始数据和数据的转换都做好了，剩下的只需要装配在一起，我们的grid就出来了。
•vargrid=new
•ds:
ds,
Ext.grid.Grid（'
grid'
{
•cm:
cm
•grid.render（）;
注意：
上头是ext-1.x的写法，Ext.grid.Grid的第一个参数是渲染的id，对应在html里应该有一个<
divid="
grid"
/div>
的东西，这样grid
才知道要把自己画到哪里。
创建完grid以后，还要用grid.render（）方法，让grid开始渲染，这样才能显示出来。
•好了，把所有代码组合到一起，看看效果吧。
•varcm=newExt.grid.ColumnModel（[
•{header:
•]）;
•
•vargrid=newExt.grid.Grid（'
看看吧，这就是咱们搞出来的grid了。
html例子是lingo-sample/1.1.1目录下的02-01.html，把这个目录copy到
ext-1.x的example目录下，就可以直接打开观看效果。
2.3.上边那个是1.x的，2.0稍微有些不同哦
首先，Ext.grid.Grid已经不见了，咱们需要用Ext.grid.GridPanel。
需要传递的参数也有少许区别。
var
grid=newExt.grid.GridPanel（{
el:
ds:
cm:
看到了吗？
负责指定渲染位置的id放到了{}里边，对应的名字是el。
似乎ext2里对这些参数进行了统一，比以前更整齐了。
因为其他地方都一样，我就不多说了，html例子在是lingo-sample/2.0目录下的02-01.html。
从截图上看，少了斑马条，下边多了一条线，应该只是css有所不同吧。
默认情况下，两个版本的grid都可以拖拽列，也可以改变列的宽度。
不知道怎么禁用这两个功能呢。
最大的不同应该是1.x里默认支持的右键效果，在2.0里不见了。
按shift和ctrl多选行的功能倒是都有。
区别是，全选后，1.x必须按住ctrl才能取消，直接单击其中一个行，不会取消全选功能，而2.0里只需要任意点击一行，就取消全选，只选中刚才点击的那行。
哦，哦，那颜色不要也算是区别吧。
2.4.按顺序，咱们先要把常见功能讲到，让grid支持按
列排序
其实很简单，需要小小改动一下列模型。
cm=new
Ext.grid.ColumnModel（[
sortable:
true},
如果你英语还可以，或者懂得查字典的话（软件翻译也算），那么你就会知道，多出来的这个sortable属性应该是可以排序的意思。
现在咱们试一下改动后的
效果。
看到了没有？
编号的标题上有个小小的箭头，表格里的数据也是按照编号做的逆序排列，如此简单，我们就实现了按列排序。
很有趣的是，2.0加上sortable以后，1.x那种右键功能也跑回来了，不过它用的不是右键，而是下拉菜单似的实现方式。
什么？
你问为什么其他两列无法排序？
！
嗯，好像是因为你还没有给另两列添加
sortable属性。
怎么加？
按编号那样加就行了。
还是不会？
-_-。
true}
这样所有列都可以排序了。
怎么取消排序？
2.5.让单元格里显示红色的字，图片，按钮，你还能想
到什么？
嘿，希望你跟我一样，不愿意只能在grid里看到文字，至少不是单调的，毫无特色的文字。
有些人就问了，如果我想改变一下单元格里显示内容，应该怎么办
呢？
非常不幸的是，ext的作者，伟大的jack早已经想到了，说真的，你没想到的，他都想到了，不只想到了，他还做出来了。
唉，这就是区别啊。
为啥你就不能动手做些东西呢？
就知道向别人要这要那，唉。
首先，我宣布，偶们的数据要扩充啦，每个人要加上一个性别字段。
vardata=[['
male'
['
female'
],['
];
男女搭配，干活不累撒。
而且现在中国就是男多女少，我就还没对象呢。
征婚中，单身女性加（QQ）771490531详谈。
你可以试试不改其他的部分，显示的结果是不会改变的，因为原始数据要经过
ds的处理才能被grid使用，那么下一步我们就开始修改ds，把性别加进去。
vards=newExt.data.Store（{
newExt.data.MemoryProxy（data）,reader:
sex'
添加了一行{name:
}，把数组的第二列映射为性别。
现在grid可以感觉到
sex了，嘿嘿。
不过grid还显示不了性别这列，因为咱们还没改cm。
性别'
到现在其实都没什么新东西，但是你不觉得光看平板字，很难分出哪个是GG哪个是MM吗？
听说过红男绿女没？
要是男的都加上红色，女的都变成绿色，那不
是清楚多了。
就像下面一样。
怎么样？
是不是效果大不同了。
你不会认为很难吧，嗯，确实，如果你对html
升级会员 