- 浏览: 111537 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
小布丁丶:
一个简单的问题非要整这么复杂
extjs grid 根据条件禁用选中 -
kylewebgame:
不错啊,做一个线程定时保存,不知道记录后如何做查询呢?或者怎样 ...
一个日志管理设计类
重要的方法:grid.getStore().getModifiedRecords();获得编辑后的结果
text: "增加",
handler: function() {
var Plant = store.recordType;
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p); //插入第一行
grid.startEditing(0, 0);
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif'; Ext.QuickTips.init(); Ext.onReady(function() { //Ext.Msg.alert("sf0", "sdf"); //格式化日期 function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; } // 别名 var fm = Ext.form; //checkbox选择模型 var sm = new Ext.grid.CheckboxSelectionModel({ checkOnly: true }); //构造一个只能包含checkbox的列 var checkColumn = new Ext.grid.CheckColumn({ header: 'Indoor?', dataIndex: 'indoor', width: 55 }); // 构造ColumnModel var cm = new Ext.grid.ColumnModel({ columns: [ sm, { id: 'common', header: 'Common Name', dataIndex: 'common', width: 220, // 使用上边定义好的别名 editor: new fm.TextField({ allowBlank: false }) }, { header: 'Light', dataIndex: 'light', width: 130, editor: new fm.ComboBox({ typeAhead: true, triggerAction: 'all', transform: 'light', lazyRender: true, listClass: 'x-combo-list-small' }) }, { header: 'Price', dataIndex: 'price', width: 70, align: 'right', renderer: 'usMoney', editor: new fm.NumberField({ allowBlank: false, allowNegative: false, maxValue: 100000 }) }, { header: 'Available', dataIndex: 'availDate', width: 95, renderer: formatDate, editor: new fm.DateField({ format: 'Y年m月d日', minValue: '01/01/06', disabledDays: [0, 6], disabledDaysText: 'Plants are not available on the weekends' }) }, checkColumn ], defaults: { sortable: true } }); // 构造一个Store对象 var store = new Ext.data.Store({ url: 'plants.xml', reader: new Ext.data.XmlReader( { record:'plant' }, [ { name: 'common', type: 'string' }, { name: 'botanical', type: 'string' }, { name: 'light' }, { name: 'price', type: 'float' }, { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' }, { name: 'indoor', type: 'bool' } ] ), sortInfo: { field: 'common', direction: 'ASC' } }); // 构造可编辑的grid var grid = new Ext.grid.EditorGridPanel({ //sm: new Ext.grid.RowSelectionModel({ singleSelect: false }), sm: sm, store: store, cm: cm, renderTo: 'grid', width: 600, height: 300, autoExpandColumn: 'common', title: 'Edit Plants?', frame: true, plugins: checkColumn, clicksToEdit: 1, //默认2次双击才触发编辑框事件 listeners: { "afterEdit": { fn: afterEdit, scope: this } }, bbar: new Ext.PagingToolbar({ pageSize : 5, store : store, firstText : '第一页', nextText : '下一页', prevText : '上一页', refreshText : '刷新', lastText : '最后一页', beforePageText : '当前', afterPageText : '页/共{0}页', displayInfo : true, displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg : "没有记录" }), tbar: [{ text: "保存", handler: function() { var mod=grid.getStore().getModifiedRecords(); for ( var i = 0; i < mod.length; i++) { alert(mod[i].data.common); } var mod = store.modified; // updateData(mod); } }, '-', { text: "增加", handler: function() { var Plant = store.recordType; var p = new Plant({ common: 'New Plant 1', light: 'Mostly Shade', price: 0, availDate: (new Date()).clearTime(), indoor: false }); grid.stopEditing(); store.insert(0, p); grid.startEditing(0, 0); } }, " ", { text: "删除", handler: function() { var selModel = grid.getSelectionModel(); if (selModel.hasSelection()) { Ext.Msg.confirm("警告", "确定要删除吗?", function(button) { if (button == "yes") { var selections = selModel.getSelections(); Ext.each(selections, function(item) { store.remove(item); // store.removed.push(item); }); } // alert(store.removed.length); }); } else { Ext.Msg.alert("错误", "没有任何行被选中,无法进行删除操作!"); } } } ] }); // 触发数据的加载 store.load(); //发送数据到服务器端进行更新 // function updateData(mod) { // var json = []; // Ext.each(mod, function(item) { // json.push(item.data); // }); // if (json.length >= 0) { // Ext.Ajax.request({ // url: "EditGrid.aspx", // params: { data: Ext.util.JSON.encode(json) }, // method: "POST", // success: function(response) { // Ext.Msg.alert("信息", "数据更新成功!", function() { store.reload(); }); // }, // failure: function(response) { // Ext.Msg.alert("警告", "数据更新失败,请稍后再试!"); // } // }); // } // else { // Ext.Msg.alert("警告", "没有任何需要更新的数据!"); // } // } //编辑后触发的事件,可在此进行数据有效性的验证 function afterEdit(e) { if (e.field == 'common') { if (e.value == '123') { Ext.Msg.alert("错误", "大笨是人物不是植物", function() { grid.startEditing(e.row, e.column) }); } } } });
发表评论
-
dwr反推+extjs gridpanel
2013-04-28 20:17 1022JMS接收到消息后,使用DWR反推到gridpanel展示 ... -
extjs portal实现类似门户定制的功能
2013-04-13 10:28 4509提供一键恢复功能,点击恢复默认设置即可恢复到原有界面 保存 ... -
extjs+springmvc上传
2013-04-10 15:32 1112extjs上传文件要求服务器端返回的contenttype是 ... -
实现extjs combox下拉树的模糊查询
2013-04-08 10:28 7332<script type="text/ja ... -
extjs实现级联以及节点的模糊查询
2013-04-07 11:15 1712Ext.tree.TreeCheckNodeUI 前面是通 ... -
extjs+springmvc实现带有复选框树的级联 (treepanel使用)
2013-04-03 13:42 4606一直想弄个同步树,查阅相关资料开始动手写个,借鉴了相关资料 ... -
extjs grid 根据条件禁用选中
2012-08-28 15:23 5845//var time =""; / ... -
一个extjs列表页面的形成
2012-07-21 11:20 3506一个列表大致有如下之间的组件 Toolbar,Gr ... -
Ext.form.FormPanel对象的学习布局
2012-07-20 22:13 2884UserPhoneTestWin = Ext.exten ... -
Ext Accordion 和border学习
2012-07-20 21:45 2705使用Ext Accordion 布局时默认展开第一个元素 ... -
extjs右键功能
2012-07-20 10:02 997大致代码如下 initListener : funct ... -
extjs中ComboBox的学习
2012-06-29 16:58 834Ext.onReady(function(){ Ex ...
相关推荐
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段,而是显示的EditorGridPanel中 store的dataindex指定的字段内容。
因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
EXTJS 学习笔片段1 Form ComboBox 远程ComboBox 替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) ...
22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件TreeNode 31)使用树控件TreeLoader 32)自定义TreeLoader
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、...73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65
….36 6.2 可编辑的表格EditorGridPanel……….………………………………………………………………………..…….41 6.3 与服务器交互……….………………………………………………………………………………...
1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的... GroupingView, EditorGridPanel): Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解