ExtJs获取rownumberer列值

评论(0)浏览(331)分类:extjs开发技巧
ExtJs获取rownumberer列值  extjs如何获取rownumberer列的值,rownumberer列是自动增长的列,配置dataIndex无效,配置了editor也不能修改rownumberer的值。  如果没有对数据进行删除操作,直接store.getCount()获取总记录数遍历一次就得到rownumberer值了。如果做了删减操作,rownumberer列值不连续,需要获取这些不连续的值,可以通过遍历dom来获取。  ExtJs获取r..

扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示

评论(0)浏览(678)分类:extjs开发技巧
扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示  本示例通过配置tpl参数,增加ext4.1的Ext.ux.form.ItemSelector要显示的内容。默认Ext.ux.form.ItemSelector只能显示一个配置的值,通过对Ext.ux.form.ItemSelector和Ext.ux.form.MultiSelect的修改,传递tpl参数实现自定义显示。效果如下,增加了value的显示。  扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示步骤如下1)在ext的ex..

Ext如何对本地数据进行分页显示

评论(0)浏览(2257)分类:extjs开发技巧
Ext如何对本地数据进行分页显示  ext加载数据时,分页功能一般通过服务器返回需要显示的数据,返回多少显示多少,即使stroe配置了pageSize属性,而返回的数据量大于pageSize定义的,多余的数据还是会显示出来。所以按照一般的方式创建store数据源加载本地数据,会一次性显示完所有的数据,而没有分页效果(虽然页脚的分页导航出来了)。  要对客户端数据进行分页,可以使用..

extjs combobox省市县3级联动示例

评论(0)浏览(348)分类:extjs开发技巧
extjs combobox省市县3级联动示例  extjs combobox省市县3级联动示例,示例居于ext-4.1.1a,4+版本应该不会出错,3-自己注意修改store的创建模式,3+和4+是extjs的分水岭,store创建基本完全不一样,自己对照api修改如果需要兼容3-版本的extjs。  extjs combobox省市县3级联动示例源代码如下!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/str..

extjs判断gridpanel是否滚动到底部

评论(0)浏览(367)分类:extjs开发技巧
extjs判断gridpanel是否滚动到底部  extjs判断gridpanel是否滚动到底部,思路就是获取extjs gridpanel的数据容器,添加scroll事件,判断数据容器的scrollTop+offsetHeight=scrollHeight时就到底了。  本实例居于ext-4.1.1a,其他版本自己检查api(主要3-以下版本)兼容性,示例居于ext-4.1.1a/examples/grid/array-grid.html修改 var grid = Ext.create('Ext.grid.Panel..

ext combobox下拉选项框不需要点击自动显示

评论(0)浏览(682)分类:extjs开发技巧
ext combobox下拉选项框不需要点击自动显示  ext combobox下拉选项框不需要点击combobox右边的下拉箭头,打开页面显示完成就自动显示下拉选项框解决办法。  解决办法就是给combobox添加id,在boxready事件(注意不能用render或者afterrender,这2个事件自动显示出来的下拉选项框不是容器的宽度,比combobox长度短)然后通过id获取到Element对象,然后找到箭头对象,触发click事件。Ex..

extjs actioncolumn依据数据显示隐藏操作按钮

评论(0)浏览(913)分类:extjs开发技巧
extjs actioncolumn依据数据显示隐藏操作按钮  extjs actioncolumn如何依据当前数据行的某些值来实现隐藏actioncolumn的items中的icon图标。  配置extjs actioncolumn的items项中的getClass可以实现给icon添加特殊样式,然后此特殊样式设置display:none实现icon的隐藏。  actioncolumn items项目配置说明,http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.ActionColumn-cfg-item..

Ext4 grid调用reconfigure RowEditing对不齐错位解决办法

评论(0)浏览(611)分类:extjs开发技巧
Ext4 grid调用reconfigure RowEditing对不齐错位解决办法  Ext4 grid调用reconfigure后,如果grid之配置过RowEditing,会导致生成的编辑器和列不对其,如下图所示grid未调用reconfigure前,RowEditing对齐grid调用reconfigure后,RowEditing不对齐  解决办法就是重新构造RowEditing的UI。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdhtmlheadmeta http-..

Ext整合ueditor示例

评论(0)浏览(530)分类:extjs开发技巧
Ext整合ueditor示例  Ext整合ueditor示例  Ext整合ueditor示例源代码!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleExt整合ueditor示例/titlelink rel=stylesheet type=text/css href=../../resources/css/ext-all.css /script type=te..

Ext4如何使用集成kindeditor

评论(0)浏览(551)分类:extjs开发技巧
Ext4如何使用集成kindeditor  ext如何使用kindeditor编辑器,将kindeditor集成到ext框架里面。  将kindeditor集成到ext框架里面效果如下  Ext4如何使用集成kindeditor源代码代码如下,测试ext版本为4.1,其他版本未测试,4.xx版本应该没有问题,ext3-和ext5+由于改动过,特别是ext3和ext4+相差比较大,所以ext3无法运行。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01..

Ext.grid.feature.Grouping页头分组如何显示其他信息

评论(0)浏览(1028)分类:extjs开发技巧
Ext.grid.feature.Grouping页头分组如何显示其他信息  Ext4+增加了groupHeaderTpl配置项,可以用来显示分组相关信息。如果要显示除了name外的信息groupHeaderTpl配置项还提供了rows信息,这个rows是ext分好组的数据。Ext.grid.feature.Grouping的groupHeaderTpl可用参数查看这里:http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.feature.Grouping-cfg-groupHeaderTpl。  如下面这个Ext.g..

Ext整合显示echarts示例

评论(0)浏览(2639)分类:extjs开发技巧
Ext整合显示echarts示例  echarts图标如何显示在extjs的panel对象中。  Ext整合显示echarts源代码如下!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleExt中整合echarts示例/titlelink rel=stylesheet type=text/css href=../../resources/cs..

ext4/ext5 tree树节点搜索展开示例

评论(0)浏览(762)分类:extjs开发技巧
ext4/ext5 tree树节点搜索展开示例  extjs如何通过关键字查找树节点,并且展开找到的tree节点。本示例在ext-5.1.0,ext-4.1.1a下测试通过。titleext4,ext5的tree树节点搜索示例/title关键字:input type=text id=t /input type=button value=搜索所有节点并展开 onclick=findNode() /script var rootNode,store,tree; Ext.onReady(function () { store = Ext.cre..

ext如何读取嵌套的子json节点数据

评论(0)浏览(474)分类:extjs开发技巧
ext如何读取嵌套的子json节点数据  ext如何读取嵌套的子json节点数据,如类似下面的数据,用户详细信息放在子节点下userInfo下。nestedData.json{ rows: [ { userName: system, userInfo: { active: true, address: 深圳市, birthday: 2014-11-03 } } ]}ext如何读取嵌套的..

Ext.tree.Panel显示checkbox并且级联选择或者取消选择

评论(0)浏览(1255)分类:extjs开发技巧
Ext.tree.Panel显示checkbox并且级联选择或者取消选择  ext4,ext5 Ext.data.TreeStore如何显示复选框checkbox,勾选复选框checkbox时如何级联选中子节点的复选框。  ext4,ext5实现check tree级联选择源代码如下提示:checkchange事件参数node,5+返回的是Ext.data.TreeModel,ext4是Ext.data.NodeInterface对象 Ext.onReady(function () { store = Ext.create('Ext.data.TreeSto..

ext4,ext5 tree添加右键菜单

评论(0)浏览(306)分类:extjs开发技巧
ext4,ext5 tree添加右键菜单  ext4,ext5的tree对象如何添加自定义右键菜单,菜单项包含添加,删除,修改tree当前右键点击的tree节点的功能。  ext4,ext5的tree对象如何添加自定义右键菜单,菜单项包含添加,删除,修改tree当前右键点击的tree节点的功能源代码如下,测试版本为:ext-4.1.1a,ext-5.1.0,基本兼容ext4+和ext5+,ext3-自己看api来修改丢应的js代码。 ..

Ext rowexpander动态获取数据示例

评论(0)浏览(401)分类:extjs开发技巧
Ext rowexpander动态获取数据示例  Ext rowexpander动态获取数据示例  示例在ext-4.1.1a,ext-4.2.1.883,ext-5.1.0版本下测试成功,其他版本自己查看API进行修改。titleExt rowexpander动态获取数据示例/titlescript type=text/javascript Ext.Loader.setConfig({ enabled: true}); Ext.Loader.setPath('Ext.ux', '../ux'); Ext.require(['..

ext gridpanel数据导出excel文件

评论(0)浏览(359)分类:extjs开发技巧
ext gridpanel数据导出excel文件  ext gridpanel导出excel文件类库代码,支持base64客户端数据直接导出。base64类库需要自己导入:javascript base64编码解码类库 var extToExcel = {//ext gridpanel导出excel文件类库代码 exportResult: function () { var fileName = this.title; var vExportContent = this.getExcelXml(); //..

Ext formpanel loadRecord/load方法示例

评论(0)浏览(934)分类:extjs开发技巧
Ext formpanel loadRecord/load方法示例  Ext formpanel loadRecord/load方法给formpanel加载数据示例  Ext formpanel loadRecord是加载本地数据用的,注意参数一定要是Ext.data.Record(3-版本)或者Ext.data.Model(4+版本)实例对象,不能直接加载JSON对象。  Ext formpanel load是加载远程数据用的,返回的数据格式如下,success为ture表示请求成功,数据放到data键名称下注..

Ext设置selModel(复选框选择)双击编辑如何恢复默认选中的数据库

评论(0)浏览(1354)分类:extjs开发技巧
Ext设置selModel(复选框选择)双击编辑如何恢复默认选中的数据库  Ext如果添加了selModel,可以选择数据行,同时添加Ext.grid.plugin.RowEditing设置双击进行编辑时,双击数据行编辑会导致之前选中的数据行被取消选择,可能是冲突了(也许可以配置其他选项来解决冲突,但是没找到)。选中数据行双击编辑后导致选中的数据行被取消选中解决办法:Ext.grid.plugin.RowEditing添加beforeedit事件保存勾选状态,然..

对Ext指定节点下的子节点进行排序

评论(0)浏览(255)分类:extjs开发技巧
对Ext指定节点下的子节点进行排序  如何对ext指定的节点进行排序,而不使用Ext treestore对象的sorters进行排序。  下面的示例居于ext-4.1.1a下的examples\tree\check-tree.html示例,取消treestore的默认sorters排序,对To Do下的子节点进行升序排列。  为排序前效果如下 var store = Ext.create('Ext.data.TreeStore', { proxy: { type: &..

Ext grid插入删除数据更新RowNumberer行号

评论(1)浏览(397)分类:extjs开发技巧
Ext grid插入删除数据更新RowNumberer行号  Ext gridpanel设置了RowNumberer列后,当删除或者添加新数据行时,RowNumberer这列的行号是不会自动更新的,如下下图所示,调用了下面的代码后就会出现行号重复和不连续的情况。store.removeAt(2);store.insert(0,{})  解决办法就是用ext的选择器获取到行号那列的行号容器对象执行更新。  Ext grid插入删除数据更新RowNumberer行号源代码..

Ext本地化显示中文提示信息

评论(0)浏览(194)分类:extjs开发技巧
Ext本地化显示中文提示信息  ext如何将grid表头的排序提示信息,分页信息,和日期控件的说明性文字本地化显示,如中文显示。  ext已经提供很多语言包,默认ext的语言包是英文的,如果要本地化显示,如修改语言为中文,导入相关的ext语言包覆盖默认配置即可。语言包在下载的源代码的locale文件夹下面,里面包含很多种语言的js文件。 script type=text/javascript sr..

Ext.menu.Menu添加的菜单id命名不能为数字

评论(0)浏览(145)分类:extjs开发技巧
Ext.menu.Menu添加的菜单id命名不能为数字  Ext.menu.Menu调用add方法添加菜单项时,注意如果配置了id,id不能为数字,要不会报错。  Ext4-会出现:Uncaught TypeError: Cannot read property 'dom' of null 错误。  Ext5会出现:Uncaught Error: Invalid component id: 0 错误  但是在IE4-下配置id为0不报错,可以正常生成菜单。。⊙﹏⊙b汗。。。~标记下,防止以后忘记..

Ext4.2 Ext.menu.Menu setMenu动态添菜单父菜单没有展开箭头

评论(0)浏览(722)分类:extjs开发技巧
Ext4.2 Ext.menu.Menu setMenu动态添菜单父菜单没有展开箭头  Ext4.2/Ext5 Ext.menu.Menu对象,一级菜单调用setMenu动态添子菜单时,此时的父节点没有展开子菜单的箭头。目测是ext4.2的bug,因为ext4.1下调用setMenu是出现展开子菜单的箭头的。如下图Ex5 Ext.menu.Menu setMenu动态添菜单父菜单没有展开箭头Ext4.2 Ext.menu.Menu setMenu动态添菜单父菜单没有展开箭头Ext4.1 Ext.menu.Menu setMenu动态添..

ext4 datefield点击年月弹出层同时设置datefield内容

评论(0)浏览(486)分类:extjs开发技巧
ext4 datefield点击年月弹出层同时设置datefield内容  ext4或者ext5的datefield对象,在日期选择器中,如何在点击年月弹出层中的月份或者年份时,可以同时设置datefield对象的值,而不需要点击年份或者月份确定后返回日期选择器,再次点击日期才能设置datefield的值。  本示例居于ext4.1.1a,如果其他版本ext自己找相关版本的API来查看,效果如下  ext4 datefield点击年月弹出层同时设置date..

Ext5 Ext.data.proxy.Memory客户端数据分页示例

评论(1)浏览(1594)分类:extjs开发技巧
Ext5 Ext.data.proxy.Memory客户端数据分页示例  Ext5使用Ext.data.proxy.Memory对客户端数据进行分页示例,Ext5对Ext.data.proxy.Memory进行了调整,要对客户端数据进行分页,使用Ext.data.proxy.Memory即可,配置enablePaging为true。如果版本低于Ext5,需要使用Ext.ux.data.PagingMemoryProxy这个对象(具体参考:Ext4如何对本地数据进行分页显示)。Ext5 Ext.data.proxy.Memory客户端数..

Ext表单如何直接显示错误信息

评论(0)浏览(157)分类:extjs开发技巧
Ext表单如何直接显示错误信息  Ext的表单配置了allowBlank为false或者其他验证条件时,如何在表单加载完毕后直接显示错误提心提示,而不需要输入控件获取焦点,blur后在显示数据为空或者和验证条件不匹配时配置的错误信息。  在FormPanel表单加载完毕后直接显示错误提示信息,可以给FormPanel增加render事件,触发BasicFrom的isValid方法即可将需要验证的字段的提示信息..

Ext Grouping Grid分组添加分页

评论(0)浏览(867)分类:extjs开发技巧
Ext Grouping Grid分组添加分页  Ext Grouping Grid增加分页效果,和普通的Ext Grid分页一样,增加PagingToolbar即可,然后依据PagingToolbar发送的分页参数page,返回需要的数据就行,配置分组后会自动分组返回的数据。  Ext Grouping Grid增加分页源代码如下groupgrid-paging.htmlhtmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / titl..

Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody,expandbody事件解决办法

评论(0)浏览(910)分类:extjs开发技巧
Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody,expandbody事件解决办法  Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件。解决办法:给grid对象添加collapse..