Ext整合显示echarts示例

评论(0)浏览(2638)分类: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..

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

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

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设置selModel(复选框选择)双击编辑如何恢复默认选中的数据库

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

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 Ext.grid.Panel调用reconfigure后如何同时更新bbar导航条

评论(0)浏览(1167)分类:extjs开发技巧
Ext4 Ext.grid.Panel调用reconfigure后如何同时更新bbar导航条  本示例通过展示Ext4的Ext.grid.Panel调用reconfigure后如何同时更新gridPanel的bbar导航条,调用reconfigure如果不对bbar进行相关处理,bbar显示的还是上一次的信息,效果如下初始状态点击reconfigure重新配置Ext.grid.Panel测试ext版本4.1.1a和ext-4.2.1.883(一般4+以上版本修改不是很大,4一下的API可能有很大不同),如果是其他版本的ex..

Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法

评论(0)浏览(1149)分类:extjs开发技巧
Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法  Ext4+ Ext.form.field.File控件配置disabled:true,当调用转为setDisabled(false)或者enable()方法后使file控件可用,但是file控件右边的选择按钮还是灰色的。这个视乎是ext4的bug,此时fileupload控件可用,但是触发选择文件的按钮还是灰色的,并没有移除触发选择文件按钮的不可用样式。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN ht..

Ext4如何判断tabpanel是否已经存在某个tab

评论(0)浏览(1120)分类:extjs开发技巧
Ext4如何判断tabpanel是否已经存在某个tab  ext4如何判断tabpanel中是否已经存在某个tab,如果存在就激活这个tab,否则重新打开tab。  原理:在tabpanel添加tab的时候增加tab的id配置,然后通过Ext.getCmp获取控件,如果不存在则添加此tab,否则调用tabpanel的setActiveTab方法激活此tab。  示例代码,点击左边菜单treepanel的叶子节点时,在右边的tabpanel中动态添加tab,在添加前..

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 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键名称下注..

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.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..

Ext4 Ext.grid.Panel列自适应宽度

评论(0)浏览(888)分类:extjs开发技巧
Ext4 Ext.grid.Panel列自适应宽度  功能描述:根据传入的store数据源中每列内容的最大长度,自动调整Ext.grid.Panel列宽度,使每列的内容显示完全,不被隐藏起来。  实现方法:用一个absolute定位的容器来计算store数据源中每列的长度,取最大值作为此列的width配置。  Ext版本号为:4.1.1a  未设置Ext.grid.Panel列的宽度效果如下,默认宽度为100px  通过计算每列..

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 Ext.data.proxy.Direct directFn示例

评论(0)浏览(840)分类:extjs开发技巧
Ext4 Ext.data.proxy.Direct directFn示例  Ext4中proxty为Ext.data.proxy.Direct示例代码,注意ext4.0和ext4.1+的区别,ext4.1+需要配置directCfg/method的getArgs方法,ext4.0不需要。  示例代码,store使用Ext.data.proxy.Direct提供的数据源,然后gridpanel显示数据,ext4.0 directFn示例代码来源于:http://jsfiddle.net/molecule/XhvYe//molecule/XhvYe/,自己参考源代码后增加..

Ext4更新store总记录数量

评论(0)浏览(822)分类:extjs开发技巧
Ext4更新store总记录数量  如果ext4的store对象通过loadData方法加载数据时,而不是通过load方法,那么即使配置了reader对象的totalProperty也无法正常获取总的记录数,为0。这样如果需要分页的时候就比较麻烦了,获取不到总的记录数。  注意:使用store的loadData方法加载的数据是JSON数组,不能是JSON对象。如{total:100,data:[{name:'showbo',addr:'..

Ext4.1如何禁止对某些单元格进行编辑

评论(0)浏览(775)分类:extjs开发技巧
Ext4.1如何禁止对某些单元格进行编辑  Ext4.1如何禁止对某列进行编辑,或者对一些特殊的单元格不允许进行编辑  可以通过beforeedit事件对单元格进行判断,不符合编辑的单元格单击编辑时return false阻止生成输入控件。  Ext4.1 Ext.grid.PanelView事件的介绍如下beforeedit( editor, e, eOpts ):Forwarded event from Ext.grid.plugin.Editing.Fires before editing is trig..

ext4使用JSONP跨域验证

评论(0)浏览(764)分类:extjs开发技巧
ext4使用JSONP跨域验证  ext4支持发送jsonp请求,所以当跨域页面支持jsonp操作时,可以使用ext4.0的Ext.data.JsonP来实现跨域验证或者获取数据。  jsonp具体的跨域原理可以看这个:JSONP跨域  下面为一个简单使用ext4实现跨域验证的示例代码,返回客户端一些验证信息。只作为研究使用,安全性基本没有。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://..

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 Tree/TreeStore加载的原始JSON数据

评论(0)浏览(759)分类:extjs开发技巧
获取Ext Tree/TreeStore加载的原始JSON数据  本源代码将Ext的Tree对象或者TreeStore加载的数据源转换为原始的json对象。如果对tree对象节点增加删除后,需要保存结果到服务器的json文件中,而不是数据库,可以将递归遍历TreeStore获取原始数据并重建对应的JSON对象。  获取Ext Tree/TreeStore加载的原始JSON数据源代码如下,测试通过版本:ext-4.1.1a(ext4-没有Ext.data.NodeInterfa..

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动态添..

从Ext.store中获取数据方法

评论(0)浏览(684)分类:extjs开发技巧
从Ext.store中获取数据方法  如何从Ext.store中获取数据  从store中获取数据有很多种途径,可以依据不同的要求选择不同的函数。最直接的方法是根据record在store中的行号获得对应的record,得到了record就可以使用get()函数获得里面的数据了,如下面的代码所示。store.getAt(0).get('name')  通过这种方式,我们可以遍历store中所有的record,依次得到它们的..

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

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

扩展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..

Ext4 Ext.data.Model save方法示例

评论(0)浏览(667)分类:extjs开发技巧
Ext4 Ext.data.Model save方法示例  Ext4+的Ext.data.Model实例新增了一个save方法,用于将此行数据发送到服务器进行保存。save参数为Ext.data.Operation,JSON对象,同时适用于proxy配置的参数都可以添加进去。  Ext4 Ext.data.Model save方法示例,store加载完毕后修改第一条记录的的age,然后调用save方法调用ajax发送此行的数据到服务器进行保存(注意:proxy中writer配置..

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 propertygrid字段

评论(1)浏览(572)分类:extjs开发技巧
不允许编辑Ext propertygrid字段  如何禁止对ext的propertygrid的字段进行编辑。  对于禁止编辑ext propertygrid的所有字段,可以有2种方法1)配置disabled :true(Ext版本2.3.0+),所有字段无法编辑,propertygrid显示为灰色的。var propsGrid = Ext.create('Ext.grid.property.Grid', { disabled :true,//....propertygrid其他配置});2)使用beforeedit事件..

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整合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 datefield点击年月弹出层同时设置datefield内容

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