- 浏览: 235729 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
月度银墙:
wangxiang243 写道不错 !但是ext4中六月和十二 ...
ext2,3,和4 版本 只显示年月的日期插件 -
38123978:
你好,我最近在看cassandra的性能,我想问一下5000万 ...
Cassandra学习笔记3 -
zhaojinmeng:
您好楼主,extjs5要怎么扩展啊?求指导
ext2,3,和4 版本 只显示年月的日期插件 -
love_wting:
为什么下拉框的表格样式显示了,数据访问json也从数据库中取到 ...
Extjs 下拉grid -
laungcisin:
yangxiutian 写道另外Ext4.2.1还故意把x-m ...
ext2,3,和4 版本 只显示年月的日期插件
Extjs 下拉grid
Ext.ns("Ext.plugins.GridCombox"); Ext.plugins.GridCombox = function(a) { this.config = Ext.apply({ width : 320, height : 350 }, a); }; Ext.extend(Ext.plugins.GridCombox, Ext.util.Observable, { init : function(b) { Ext.apply(b, { initList : b.initList.createInterceptor((function(d) { return function() { if(!this.list){ var cls = 'x-combo-list'; this.list = new Ext.Layer({shadow:this.shadow, constrain:true, shim:true}); var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth); this.list.setWidth(lw); this.list.swallowEvent('mousewheel'); this.assetHeight = 0; if(this.title){ this.header = this.list.createChild({cls:cls+'-hd', html: this.title}); this.assetHeight += this.header.getHeight(); } this.innerList = this.list.createChild({cls:cls+'-inner'}); this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); this.grid = new Ext.grid.GridPanel({ border:true, collapsible: false, loadMask: true , autoScroll:true, width : this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth), height : 250, store : b.store, cm : b.cm, sm: new Ext.grid.RowSelectionModel({singleSelect:true}), bbar:new Ext.PagingToolbar({ id:'PagingToolbar', pageSize: b.pageSize || 20, store:b.store, displayInfo: false }) }); this.grid.render(this.innerList); this.innerList.appendChild(this.grid.getEl()); this.grid.on("rowclick", function (g, rowIndex, e) { var record = b.store.getAt(rowIndex); this.onSelect(record, rowIndex); this.collapse(); if (!b.trigger) { this.focus(); } }, this); } return false; } })(this.config), b), onRender : b.onRender.createSequence(function() { if (!this.lazyInit) { this.initList(); } else { this.on("focus", this.initList, this, { single : true }); } }, b), onTriggerClick : b.onTriggerClick.createInterceptor((function(d) { return function() { if (!this.disabled) { if (this.isExpanded()) { this.collapse(); this.el.focus(); } else { this.onFocus({}); this.expand(); this.store.load();//点击时 grid的store加载数据 } } return false; }; })(this.config), b), expand : b.expand.createInterceptor((function(d) { return function() { if (this.isExpanded()) { return; } this.list.alignTo(this.wrap, this.listAlign); this.list.show(); if (Ext.isGecko2) { this.innerList.setOverflow('auto'); // necessary } Ext.getDoc().on('mousewheel', this.collapseIf, this); Ext.getDoc().on('mousedown', this.collapseIf, this); this.fireEvent('expand', this); }; })(this.config), b) }); } });
使用例子:
var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id',menuDisabled:true}, {header:'性别',dataIndex:'name',menuDisabled:true}, {header:'名称',dataIndex:'descn',menuDisabled:true}, {header:'描述',dataIndex:'date',menuDisabled:true} ]);
var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'js/8.jsp'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalCount', root: 'items', id:id }, [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'descn', type: 'string'}, {name: 'date', type: 'string'} ]), baseParams:{ start:0,limit:10 } }); var c = new Ext.form.ComboBox({ typeAhead : true, fieldLabel : '名称', hiddenName : 'id', triggerAction : 'all', lazyRender : true, width:300, displayField:'name', valueField:'id', store:store, mode : 'local', listClass : 'x-combo-list-small', selectedClass:'', allowBlank : false, emptyText:'请选择...', cm:cm, onSelect:function(record,rowIndex){ c.setValue(record.get("id")); c.setRawValue(record.get("name")); }, plugins : [new Ext.plugins.GridCombox()] });
其中8.jsp内容
<% String start = request.getParameter("start"); String limit = request.getParameter("limit"); try { int index = Integer.parseInt(start); int pageSize = Integer.parseInt(limit); String json = "{totalCount:100,items:["; for (int i = index; i < pageSize + index; i++) { json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "',date:'2010-01-01'}"; if (i != pageSize + index - 1) { json += ","; } } json += "]}"; response.getWriter().write(json); System.out.println(json); } catch(Exception ex) { } %>
评论
2 楼
love_wting
2015-04-27
为什么下拉框的表格样式显示了,数据访问json也从数据库中取到了,但是json数据并没有渲染到下拉表格。为什么表格没有数据呢
1 楼
qhdpeter
2012-09-06
怎么第一次点上去的时候,下拉框没有展开,一定要点右边的下拉按钮。。
发表评论
-
js原型分析研究
2012-07-23 22:44 1432原型是个很微妙的东西,很多人不是很理解,理解了原型对于 ... -
Ext4.1.0 API中文版V0.4 Beta(持续更新)
2012-07-17 18:40 1075Ext4.1.0 API中文版V0.4 Beta html ... -
记录回答别人的Ext4问题
2012-07-10 13:23 26371:Ext4版本 双击Tab页面页签关闭 来自问题:ht ... -
Extjs4 时分秒日期插件
2012-05-11 13:05 12340插件1: 初始界面 弹出界面 插件代码 见附件 ... -
Ext3 日期范围插件
2012-04-03 17:32 2115先上 效果图有图有真相嘛 使用例子: ... -
Extjs2分页树 带查询功能
2012-03-29 11:37 4168先上效果图: 插件代码见附件 使 ... -
ext2 日期范围控件(2个控件)
2012-03-25 17:39 3005控件1 介绍: 首先加入 Ext.apply( ... -
ext2 grid 封装 (包含增删改查 导入导出等操作)
2012-02-27 14:32 5005最近项目又用到ext 比较 ... -
tree拖拽
2011-09-04 22:09 2423当时遇到如下问题: 拖拽A tree 的a节点到B tree ... -
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)源代码
2011-08-11 14:56 1102ExtJS Web应用程序开发指南(第2版)(针对Ext JS ... -
通过拖拽Grid改变行的顺序
2010-10-08 13:06 3759<script> var meta ... -
使用注解和反射构造ext的grid需要的列模型
2010-09-18 12:03 1668注解类: package xzd; import ... -
ExtJs Grid分页时序号自增的实现
2010-08-23 16:28 3045首先看到网上都是类似 http://www.blogjava. ... -
extjs 自己的小小总结
2010-08-13 21:15 3288总结自己的代码 可能以后会用到 记录一下 方便以后查阅 1 ... -
eclipse 中怎样来集成 JBOSS
2010-08-09 08:46 0eclipse 中怎样来集成 JBOSS -
ext2,3,和4 版本 只显示年月的日期插件
2010-08-03 20:23 15679Ext技术交流群:164648099 1:ext3版本 ... -
关于Extjs3.0中的TreeGrid (Ext.ux.maximgb.tg.EditorGridPanel)(转)
2010-08-01 21:38 4341转:(http://www.liyonghome.cn/ind ... -
ext grid 单元格提示 出现图片
2010-07-31 00:03 2646代码简单 只是记录一下 <html> ... -
ext tree相关知识
2010-07-30 23:53 2602ext tree 动态修改各个节点名称icon小图标 &qu ... -
ext 后台查数据库数据拼装tree数据
2010-07-26 22:21 2472来自:Extjs交流群(164648099) 说明: ...
相关推荐
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
Extjs 下拉菜单实现拼音输入进行检索
NULL 博文链接:https://qixiaopeng.iteye.com/blog/408718
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章:Ext ...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
问题描述: 在PropertyGrid中使用Combobox来选择值时,得到的应该是displayField的值,但是在确认选择的时候却显示了valueField的值,例如,下拉选择性别,displayField分别为’男’,’女’,对应的valueField分别...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid A. 常见问题乱弹 A.1. 怎么查看ext2里的api文档 A.2. 想把弹出对话框单独拿出来用的看这里 A.3. 想把...
Ex4.0共2个压缩包特性,《ext js权威指南》 ...10.3.4 数据汇总功能:ext.grid.featrue.abstractsummary与ext.grid.featrue. summary / 539 10.3.5 分组功能:ext.grid.featrue.grouping / 543 10.3.6 分组汇总...
-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
-Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...
一个 ExtJS 5.x, 6.x Widget Column Extension,用于处理单个记录的网格行操作 根据网格行记录构建固定的和动态的下拉项 在 Ext JS 5.x 和 6.x 上测试 用法 将 ActionButton.js 文件放入您的 ux 路径中 重新创建类 ...
看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果? 1.4. 为什么自己按照例子写的代码,显示出来总找不到图片 1.5. 我们还需要...
原地址是 ...扩展的话可以实现数据过滤,或者下拉动态隐藏指定列(灵感都来自extjs呵呵)。 也可以在此下载:http://www.zuidaima.com/share/1716042916154368.htm
看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总...
看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不...