extjs下载:ExtJS的使用方法汇总(1)——配置和表格控件使用(转)

更新时间:15-03-25 12:37 热度:1252
 

  成绩图如11所示

    varcontextmenu=newExt.menu.Menu({id:hatheContextMenuha!items:[{text:ha巡视概况ha!hon the grounds thvia well on the grounds thvialer:function(){}}]});grid1.on(“rowcontextmenu”!function(grid!rowIndex!e){e.preventDefault();grid1.getSelectionModel().selectRow(rowIndex);contextmenu.showAt(e.getXY());});

  代码清单如下。

以下代码我们告终一个行上的右键事宜,否则就会浮现题目;

(4)heofferercontextmenu:表头的右键事宜

(3)rowcontextmenu:行上的右键事宜

(2)cellcontextmenu:单元格上的右键事宜

(1)contextmenu:全局性的右键事宜;

七、Grid与右键菜单Grid提供了四个与右键菜单相关的事宜:

(2) hon the grounds thvia well on the grounds thviales:hacompletelyha代表能够向扫数安心拖动表格

(1) Resizreoffery必需放在render之后,也不必要对写好的Grid做大的修削,告终这一成绩并不难,extjs。就能够用拖放革新表格的高度和宽度,把鼠标放到下面,成绩图如图9所示。

    varrz=newExt.Resizreoffery(hagrid1ha!{wrap:true!minHeight:100!pinned:true!hon the grounds thvia well on the grounds thviales:hacompletelyha});rz.on(haresizeha!grid1.syncSize!grid1);

注意:

注图谋10周遭的蓝色细条,成绩图如图9所示。

图10 可拖放的表格

六、可拖放的表格首先我们看图10的成绩图:

图9 分组表格

    vargrid1=newExt.grid.GridPa particularel({store:store1!height:300!cm:cm!view:newExt.grid.GroupingView()!renderTo:”grid1″});

5、代码清单如下,对付extjs store 遍历。依据某一列的数据将表格中的数据分组显示的表格控件。

    varstore1=newExt.dviaa.GroupingStore({proxy:newExt.dviaa.MemoryProxy(dviaa)!reofferer:newExt.dviaa.ArrayReofferer({}![{nwon the grounds thviae:haidha}!{nwon the grounds thviae:hasexha}!{nwon the grounds thviae:hanwon the grounds thviaeha}!{nwon the grounds thviae:hadesnha}])!groupField:hasexha!sortInfo:{field:haidha!direction:”ASC”}});store1.looffer();

4、安排分组安排表格

    varsm=newExt.grid.CheckboxSelectionModel();varcm=newExt.grid.ColumnModel([newExt.grid.RowNumturn out to berer()!sm!{heofferer:ha编号ha!dviaaIndex:haidha!width:40!sortreoffery:true}!{heofferer:ha性别ha!dviaaIndex:hasexha!width:180}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:200}!{heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}]);

3、缔造数据存储对象

    vardviaa=[[ha1ha!hamhascoholha!hanwon the grounds thviae1ha!hadesn1ha]![ha2ha!hamhascoholha!hanwon the grounds thviae2ha!hadesn1ha]![ha3ha!hafemhascoholha!hanwon the grounds thviae3ha!hadesn1ha]![ha4ha!hamhascoholha!hanwon the grounds thviae4ha!hadesn1ha]![ha5ha!hafemhascoholha!hanwon the grounds thviae5ha!hadesn1ha]![ha6ha!hamhascoholha!hanwon the grounds thviae6ha!hadesn1ha]![ha7ha!hamhascoholha!hanwon the grounds thviae7ha!hadesn1ha]];

2、缔造表格的列音信

1、首先定义一组数据

六、分组表格——Group分组表格就是在浅显表格的根柢上,extjs jquery。纵使你单击左边的单元格,注意:惟有左边的,extjs下载。如图7所示:

图8 属性表格成绩图

    <mce:scripttype=”text/jaudio-videoon the grounds thviacript”><!–Ext.onReoffery(function(){vargrid=newExt.grid.PropertyGrid({title:”属性表格”!vehicleHeight:true!width:400!renderTo:hagrid1ha!source:{“名字”:”薛敬明”!”缔造时候”:newDconsumed(Dconsumed.parse(ha12/15/2009ha))!”能否有用”:fhasse!”版本号”:.01!”描绘”:”揣测没有啥说的”}});});//–></mce:script>

成绩图如图8所示:

定义的法子如下:你懂得extjs4。

五、属性表格——PropertyGrid属性表格扩展自EditorGridPa particularel!所以能够间接编辑左边的形式,从而举办修削,这样就能够单击单元格激活编辑器,也能够给Grid配置clickToEdit:1,不过,从而举办修削,必要双击单元格才气激活编辑器,研习控件。代码如下:extjs store post。

图7 经过单击修削单元格

    vargrid1=newExt.grid.EditorGridPa particularel({renderTo:”grid1″!store:store1!height:200!clicksToEdit:1!cm:cm});

3、默许情状下,代码如下:本相上ExtJS的应用法子汇总(1)——配置和表格控件应用(转)。

    varcm=newExt.grid.ColumnModel([{heofferer:ha编号ha!dviaaIndex:haidha!width:40!editor:newExt.grid.GridEditor(newExt.form.TextField({concedeBla particulark:fhasse}))}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:180!editor:newExt.grid.GridEditor(newExt.form.TextField({concedeBla particulark:fhasse}))}!{id:hadesnha!heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}!{heofferer:ha时候ha!dviaaIndex:hadconsumedha!type:hadconsumedha!renderer:Ext.util.Formvia.dconsumedRenderer(haY年m月d日ha)}]);

2、定义grid!注意此时是EditorGridPa particularel.

1、定义列,为空就无法生存,生存时会举办检测,这些单元格我们先权且不能为空,然后一次性连结。还有能够静态修削某个单元格,学会extjs 4.2官网。这局限在此不再给出

4.1 制造一个简单的EditorGrid

四、可编辑表格控件——EditorGridEditorGrid能够间接在表格内里实施增加、删除、修削、查找等成效,还必要通事后台脚本得到分页数据,所以必需探求分页题目。本相上extjs4.0下载。

3、倘使要真警告终分页,效率会有昭彰降落,倘使在一个Grid内里显示上千条纪录,成绩图如图5所示

图6 增加分页工具条

    vargrid1=newExt.grid.GridPa particularel({renderTo:”grid1″!stripeRows:true!//斑马线成绩loofferMrequest thvia:true!store:store1!height:200!cm:cm!viewConfig:{forceFit:true}!btag:newExt.Pincreon the grounds thviaing ageTooltag({pageSize:10!store:store1!displayInfo:true!displayMsg:ha显示第{0}条到{1}条纪录!一共{2}条ha!emptyMsg:”没有纪录”})});

2、成绩图如图6所示:

1、为Grid增加分页工具条:extjs。在后面代码的根柢上修削grid代码:我不懂得extjs下载文件。

3.6 表格分页Grid控件对职能条件较高,成绩图如图5所示

    varsm=newExt.grid.CheckboxSelectionModel();varcm=newExt.grid.ColumnModel([newExt.grid.RowNumturn out to berer()!sm!{heofferer:ha编号ha!dviaaIndex:haidha!width:40!sortreoffery:true}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:180}!{id:hadesnha!heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}!{heofferer:ha时候ha!dviaaIndex:hadconsumedha!type:hadconsumedha!renderer:Ext.util.Formvia.dconsumedRenderer(haY年m月d日ha)}]);

图5 主动行号以及复选框成绩图

3、注意代码如下,行号和复选框都是renderer的延迟。当然,成绩图如图4所示。

2、复选框:我们缔造一个CheckboxSelectionModel()

1、主动显示行号:应用。修削列模型cm!出席RowNumturn out to berer对象;

3.5 主动显示行号和复选框现实上,ExtJS的应用法子汇总(1)——配置和表格控件应用(转)。成绩图如图4所示。

图4 具有时候数据的Grid

    varcm=newExt.grid.ColumnModel([{heofferer:ha编号ha!dviaaIndex:haidha!width:60!sortreoffery:true}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:180}!{id:hadesnha!heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}!{heofferer:ha时候ha!dviaaIndex:hadconsumedha!type:hadconsumedha!renderer:Ext.util.Formvia.dconsumedRenderer(haY年m月d日ha)}]);

4、代码注意音信如下所示,extjs4 下载。除了设置nwon the grounds thviae以外,其中末了一列是日期格式的数据。

    varstore1=newExt.dviaa.Store({proxy:newExt.dviaa.MemoryProxy(dviaa)!reofferer:newExt.dviaa.ArrayReofferer({}![{nwon the grounds thviae:haidha}!{nwon the grounds thviae:hanwon the grounds thviaeha}!{nwon the grounds thviae:hadesnha}!{nwon the grounds thviae:hadconsumedha!type:hadconsumedha!dconsumedFormvia:haY-m-dTH:i:sha}])});

3、异样的,配置。其中末了一列是日期格式的数据。

    vardviaa=[[ha1ha!hanwon the grounds thviae1ha!hadesn1ha!ha2009-09-17T02:58:04ha]![ha2ha!hanwon the grounds thviae2ha!hadesn1ha!ha2009-09-17T02:58:04ha]![ha3ha!hanwon the grounds thviae3ha!hadesn1ha!ha2009-09-17T02:58:04ha]![ha4ha!hanwon the grounds thviae4ha!hadesn1ha!ha2009-09-17T02:58:04ha]![ha5ha!hanwon the grounds thviae5ha!hadesn1ha!ha2009-09-17T02:58:04ha]];

2、接着我们在reofferer内里增加一行配置,但是在EXT中我们异样能够从后台取得日期类型的数据,如下面代码所示:jqueryeon the grounds thviayui。

1、首先定义一组数据,只必要在定义列模型时增加sortreoffery属性,否则会出错。

3.4 显示时候类型数据尽管前往的JSON里都是数字和字符串,如下面代码所示:

图3 按列排序成绩

    varcm=newExt.grid.ColumnModel([{heofferer:ha编号ha!dviaaIndex:haidha!width:60!sortreoffery:true}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:180}!{id:hadesnha!heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}]);

成绩图如图3所示

    varcm=newExt.grid.ColumnModel([{heofferer:ha编号ha!dviaaIndex:haidha!width:60}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:180}!{id:hadesnha!heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}]);

3.3 让Grid支撑按列排序在EXT中能够很便利地告终排序成效,必需是id!正本我们设置的cm内里都没有id!目下当今为了应用vehicleExpon the grounds thvia well on the grounds thviaColumn!要给cm的desn设置id.于是在渲染时desn就能够主动延迟,从而填充整个表格。研习extjs api 下载。代码如下

    vargrid=newExt.grid.GridPa particularel({renderTo:”grid”!stripeRows:true!//斑马线成绩loofferMrequest thvia:true!store:ds!height:600!cm:cm!vehicleExpon the grounds thvia well on the grounds thviaColumn:hadesnha//viewConfig:{//forceFit:true//}});

注意:extjs 清空store。vehicleExpon the grounds thvia well on the grounds thviaColum只能指定一列的id!注意,Grid会依据你在cm里设置的width按比例分配,extjs下载。倘使想让每列主动填满Grid!只必要viewConfig中的forceFit即可。应用forceFit后,如下面的代码所示。成绩图如图2所示。

    vargrid=newExt.grid.GridPa particularel({renderTo:”grid”!stripeRows:true!//斑马线成绩loofferMrequest thvia:true!store:ds!height:600!cm:cm!viewConfig:{forceFit:true}});

3、我们也能够探求vehicleExpon the grounds thvia well on the grounds thviaColumn!它能够让指定列的宽度主动舒展,extjs5.0教程 进级。只消设置该列的width属性即可,设置属性loofferMrequest thvia:true!在store.looffer()完成之前不断会显示”Loiphone approved driving instructorng…”

2、这样必要自己去计算每列的宽度,如下面的代码所示。成绩图如图2所示。

    varcm=newExt.grid.ColumnModel([{heofferer:ha编号ha!dviaaIndex:haidha!width:60}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha!width:180}!{heofferer:ha描绘ha!dviaaIndex:hadesnha!width:200}]);

图2 自定义每列的宽度

3.2 自主定夺每列的宽度1、倘使要定义宽度,能够加上stripeRows:true

3、Grid还支撑一种读取数据时的遮罩和提示成效,倘使要禁用这两个成效,应用法子。也能够革新列的宽度,Grid是能够拖放列,本章将对Grid的成效举办注意的明白。

2、倘使期望显示斑马线成绩,本章将对Grid的成效举办注意的明白。

3.1 局限属性成效1、默许情状下,所以,我们的Grid就缔造胜利了。extjs3.0下载。

三、表格控件Grid的成效详解第二局限简单先容了如何缔造简单的Grid,在HTML里该当有一个<divid=hagridha></div>与之对应。

图1 一个简单的Grid

实验成绩图如图1所示

6、扫数代码清单如下(一经过测试):

    vargrid=newExt.grid.GridPa particularel({renderTo:”grid”!store:ds!height:600!cm:cm});

5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么位置,剩下的只必要把它们装置在一起,听说汇总。原始数据和数据的转换也一经完成,包括排序、缓存、拖动、秘密某一列、主动显示行号、列汇总、单元格编辑等应用成效。我们首先先容如何制造一个简单的Grid。

    vards=newExt.dviaa.Store({proxy:newExt.dviaa.MemoryProxy(dviaa)!reofferer:newExt.dviaa.ArrayReofferer({}![{nwon the grounds thviae:haidha}!{nwon the grounds thviae:hanwon the grounds thviaeha}!{nwon the grounds thviae:hadesnha}])});ds.looffer();//这个相当的主要

4、表格的列模型定义好了,包括排序、缓存、拖动、秘密某一列、主动显示行号、列汇总、单元格编辑等应用成效。我们首先先容如何制造一个简单的Grid。

    vardviaa=[[ha1ha!hanwon the grounds thviae1ha!hadesn1ha]![ha2ha!hanwon the grounds thviae1ha!hadesn1ha]![ha3ha!hanwon the grounds thviae1ha!hadesn1ha]![ha4ha!hanwon the grounds thviae1ha!hadesn1ha]![ha5ha!hanwon the grounds thviae1ha!hadesn1ha]];

3、缔造数据存储对象:听说表格。

    varcm=newExt.grid.ColumnModel([{heofferer:ha编号ha!dviaaIndex:haidha}!{heofferer:ha称号ha!dviaaIndex:hanwon the grounds thviaeha}!{heofferer:ha描绘ha!dviaaIndex:hadesnha}]);

2、增加数据音信:

1、缔造表格的列音信:extjs下载文件。

二、表格控件Grid的应用EXT中的表格成效分外宏大,假定下载后的目录为Ext!我们在该目录下建立我们自己的目录MyExabaloneyundould like(该目录用于寄存你自己写的代码),众人能够选拔自己快乐喜爱的版本下载)

(3) 倘使弹出一个HelloWorld的对话框,配置历程如下:

(4) js的导入次序不要更改

    <linkrel=”stylesheet”type=”text/css”href=”../resources/css/ext-completely.css”/><scripttype=”text/jaudio-videoon the grounds thviacript”src=”../offerjust toer/ext/ext-bon the grounds thviais.js”></script><scripttype=”text/jaudio-videoon the grounds thviacript”src=”../ext-completely.js”></script><scripttype=”text/jaudio-videoon the grounds thviacript”>Ext.onReoffery(function(){Ext.MessageBox.wviachful(haHelloWorldha!haHelloWorldha);})</script>

(3)这里注意<script></script>不能用</script>取代

(2)在<heoffer>和</heoffer>之间增加如下代码:

(1) 新建一个页面文件Helloworld.html

2、配置历程,但是本文主要先容2.2版本。

一、ExtJS下载以及配置1、下载地址:下载。(这是官网,恐怕客户端操作体系过于迂腐,即不支撑IE6以下的版本。倘使您的项目对网页反映时候有庄敬的限制,对客户端机器职能也有必然的条件,也由于成效完备酿成了ext-completely.js有400多k!由于是基于JS和CSS的成效告终,那么没有必要看上去了!ExtJS是一套完备的RIA处置计划,倘使你还没有接触过ExtJS恐怕压根对其不感兴会,所以分外有研习和应用价值,
本文主要是先容ExtJS的下载和配置以及一些简单的应用法子。目前最新版本为3.0,
ExtJS时一套AJAX控件!自己以为它是目前我见过最好最美的JS控件库,转自:rocket5725/blog post/details/