`
8792321
  • 浏览: 39623 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

自己写的一个Ext.grid.EditorGridPanel示例

    博客分类：
  • ext
EXTCSSYahooJavaScriptprototype 
阅读更多 
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>可编辑的表格</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<style type="text/css">
				.x-grid-record-red table{   
				    color: #FF0000;   
				}
				.allow-float {clear:none!important;} /* 允许该元素浮动 */  
				.all-field {
			        float:left;
			        padding:0 0 0 10px;
		    	}
		</style>
		<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs/ext-all.js"></script>
		<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
		<script>
		/****begin****/
Ext.grid.CheckColumn = function(config) {
	Ext.apply(this, config);
	if (!this.id) {
		this.id = Ext.id();
	}
	this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype = {
	init : function(grid) {
		this.grid = grid;
		this.grid.on('render', function() {
			var view = this.grid.getView();
			view.mainBody.on('mousedown', this.onMouseDown, this);
		}, this);
	},

	onMouseDown : function(e, t) {
		if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
			e.stopEvent();
			var index = this.grid.getView().findRowIndex(t);
			var record = this.grid.store.getAt(index);
			record.set(this.dataIndex, !record.data[this.dataIndex]);
		}
	},

	renderer : function(v, p, record) {
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '')
				+ ' x-grid3-cc-' + this.id + '">&#160;</div>';
	}
};
/****end****/
		
function showUrl(value)
{
return "<a href='#'>"+value+"</a>";
}

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';   
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
		
	var tpl = '<tpl for="."><div class="x-combo-list-item" ext:qtitle="值" ext:qtip="{name}">{name}</div></tpl>'; 
	
	var data = [
	
					[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com','1900-5-6',66,'0',true],
					[2, 'jfox', 'huihoo', 'www.huihoo.org','2009-5-6',11,'1',false],
					[3, 'jdon', 'jdon', 'www.jdon.com','2009-5-6',22,'1',false],
					[4, 'springside', 'springside', 'www.springside.org.cn','1992-5-6',33,'0',false],
					[5, 'aaa', 'springside', 'www.easyjf.com','1999-5-6',45,'1',false],
					[6, 'bbb', 'springside', 'www.easyjf.com','1992-5-6',55,'0',false],
					[7, 'cccc', 'springside', 'www.easyjf.com','1992-5-6',66,'1',true],
					[8, 'ddd', 'yahoo', 'www.easyjf.com','1992-5-6',77,'0',false],
					[9, 'eee', 'ddddddddddddddd', 'www.springside.org.cn','1992-5-6',1230,'0',false],
					[10, 'fff', 'fdfsdafsdfs', 'www.yahoo.com.cn','1992-5-6',32,'0',false],
					[11, 'gggg', 'this is pen', 'www.yahoo.com.cn','1992-5-6',45,'0',true],
					[12, 'hhhh', 'springside', 'www.baidu.com','1992-5-6',56,'1',false],
					[13, 'as', 'springside', 'www.baidu.com','1992-5-6',756,'0',true],
					[14, 'you', 'how are you', 'www.baidu.com','1992-5-6',4455,'1',false],
					[15, 'hom', 'springside', 'www.springside.org.cn','1992-5-6',98,'0',false],
					[16, 'fff', 'springside', 'www.yahoo.com.cn','1992-5-6',676,'1',true],
					[17, 'gggg', 'springside', 'www.yahoo.com.cn','1992-5-6',555,'0',false],
					[18, 'fff', 'springside', 'www.yahoo.com.cn','1992-5-6',890,'1',false],
					[19, 'gggg', 'springside', 'www.yahoo.com.cn','1992-5-6',1200,'1',true],
					[20, 'fff', 'springside', 'www.jdon.com','1992-5-6',1566,'1',false],
					[21, 'gggg', 'springside', 'www.jdon.com','1992-5-6',333,'0',true],
					[22, 'gggg', 'springside', 'www.jdon.com','1255-5-6',333,'1',false],
					[23, 'vvvvv', 'tttttt', 'www.jdon.com','1992-5-6',333,'0',false],
					[24, 'sex', 'springside', 'www.jdon.com','2111-5-6',333,'1',true],
					[25, 'zhangsan', 'springside', 'www.jdon.com','1988-5-6',333,'0',true]
			
				];
		
		/**	
	var store = new Ext.data.SimpleStore({
		data : data,
		fields : ["id", "name", "organization", "homepage",{
			name : "beginDate",
			type : "date",
			dateFormat : "Y-n-j"
		}]
	});
	**/
	
	var sexData=[['女','1'],['男','0']];
	
	var sexComStore = new Ext.data.SimpleStore({
             fields: ['name', 'value'],
             data : sexData,
           	 sortInfo:{field:'name', direction:'ASC'} //指定排序字段
             
     });
	var sm=new Ext.grid.CheckboxSelectionModel();
	
	var reader = new Ext.data.ArrayReader({},[
       {name: 'id'},
       {name: 'name',type: 'string'},
       {name: 'organization'},
       {name: 'homepage'},
       {name: 'beginDate', type: 'date', dateFormat: 'Y-n-j'},
       {name: 'price', type: 'float'},
       {name: 'itemrslt'},
       {name: 'married',type: 'bool'}
    ]);
    
    var store = new Ext.data.GroupingStore({
            reader: reader,
            data: data,
            groupOnSort: false,
            sortInfo:{field: 'price', direction: "ASC"},
            groupField:'homepage'
    });
	
	 // 自定义的字段
     var checkColumn = new Ext.grid.CheckColumn({
        header: "婚否?",
        dataIndex: 'married',
        width: 55
     });
	
	
	var colM = new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer({header:"序号",width:60}),
	sm,
	{
		header : "ID",
		dataIndex : "id",
		sortable : true
	},
	{
		header : "项目名称",
		dataIndex : "name",		
		fixed : true,    //如果为真列宽不能被改变
		hidden : true,    //隐藏本列
		width : 60,
		editor : new Ext.form.TextField(),
		sortable : true
	}, {
		header : "开发团队",
		dataIndex : "organization",
		editor : new Ext.form.TextField(),
		//hidden:true,/*隐藏列*/
		sortable : true
	}, {
		header : "开始日期",
		dataIndex : "beginDate",		
		renderer : Ext.util.Format.dateRenderer('Y年m月d日'),
		editor : new Ext.form.DateField({
			format : 'Y年m月d日'
		}),
		sortable : true
	}, {
		header : "网址",
		dataIndex : "homepage",
		editor : new Ext.form.TextField(),
		renderer : showUrl
	}, {
		header : "金额",
		dataIndex : "price",
		//align: 'right',
		editor : new Ext.form.NumberField({
				 	allowNegative: false, // 不允许为负数
				 	decimalPrecision: 1, // 默认的小数点位数
				 	allowDecimals: false, // 不允许为负数
				 	maxValue: 100000 // 最大值为10万 		
		}),
		css:'text-align:right;',
		renderer : Ext.util.Format.usMoney 
	},
	{
		header : "性别",
		dataIndex : 'itemrslt',
		css : 'text-align: center;',
		horizontal:true, 
		renderer: rend,
		editor : new Ext.grid.GridEditor( new Ext.form.ComboBox({ 
         displayField: 'name', 
         valueField: 'value', 
         typeAhead: true,         
         triggerAction: 'all', 
         style: 'width:30px', 
         width:100, 
         tpl :tpl, 
         hiddenName:'sex', 
         mode: 'local',
         autoLoader:true, 
         selectOnFocus:true, 
         //lazyRender :true, 
         store: sexComStore 
		}))
		
	},
	 checkColumn // 自定义的婚否列
	]);
	colM.defaultSortable = true; 	
		
	function rend(value) {
        if (value == '0') { 
            return "男"; 
        } else {
            return "女"; 
        }
    }
	//Ext.util.Format.dateRenderer('m/d/Y')
	
	// 创建数据源的记录,代表一个员工
	var Employee = Ext.data.Record.create([
	{
		name : 'id',
		type : 'int'
	},
	{
		name : 'name',
		type : 'string'
	}, 
	{name: 'organization'},
	{name: 'homepage'},		
	{
		name : 'beginDate',
		mapping : 'birth',
		type : 'date',
		dateFormat : 'm/d/Y'
	}, // 日期自动转换
	 {
		name : 'price',
		type : 'float'
	},
	{name: 'itemrslt'},
	 {
		name : 'married',
		type : 'bool'
	}]);
	
	var ptb=new Ext.PagingToolbar({ 
			pageSize: 10, 
			store: store,
			displayInfo: true,
			height: 30,
			width: 800,
			items : [' 每页', new Ext.form.ComboBox({
			width : 50,	
			store : new Ext.data.SimpleStore({
				fields : ['Label', 'Value'],
				
				data : [[10, 10], [15, 15], [20, 20], [30, 30], [40, 40],[50, 50],
						[60, 60],[70, 70], [80, 80], [100, 100]]
				}),
			displayField : 'Label',
			valueField : 'Value',
			typeAhead : true,
			mode : 'local',
			value : 20,
			listWidth: 50, /** 行宽	**/	
			triggerAction : 'all',
			selectOnFocus : true,
			listeners : {
				change : {
					fn : function(box, newValue, oldValue) {						
						grid.changePageSize(newValue);
						
					}
				},
				select : {
					fn : function(combo, value) {					
						
					}
				}
			}
			})],
			displayMsg: '显示第 {0} 条到 {1} 条记录，  共 {2} 条', 
			emptyMsg: '没有记录' 
		});
		var view=new Ext.grid.GridView({forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
		
	
	var grid = new Ext.grid.EditorGridPanel({
		//renderTo : "hello",
		title : "中国Java开源产品及团队",
		
		width : 800,
		frame: true,		
		cm : colM,
		sm: sm,
		store : store,		
		autoExpandColumn : 2, //默认自动扩展宽度的字段 
		clicksToEdit: 1, //属性定义点击几次进行编辑 clicksToEdit:1,//单击一次编辑
		loadMask: true, 
		loadMask:{msg:'正在加载数据......'},
    	bodyStyle:'width:100%',
		stripeRows:true, 
		autoHeight: true,
		plugins: checkColumn,
		viewConfig:{forceFit:true}, 
		animCollapse: false,
		
		view: new Ext.grid.GroupingView({ 
            forceFit:true, 
            sortAscText :'正序',
            sortDescText :'倒序',
            columnsText:'列显示/隐藏',
            groupByText:'依本列分组',
            showGroupsText:'分组显示',
            
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})',
            getRowClass: function(record,rowIndex,rowParams,store){// 数据显示红色
	                    		if(record.data.price>200){
										return 'x-grid-record-red';   
								 }else{
										return '';
								 }
							}
        }), 
		bbar: ptb,		
		tbar: [{ /** 顶部的工具栏 tools bar**/
                    text: '增加新员工',
                    handler : function(){
                        var p = new Employee({
                        	id: '',
                            name: '输入员工姓名',
                            organization: '',
                            homepage: '',
                            beginDate: (new Date()).clearTime(),
                            price: 0,
                            itemrslt: '0',
                            married: false
                        });                        
                        grid.stopEditing();
                        store.insert(0, p);
                        grid.startEditing(0, 0);                        
                    }
                }],
       
		listeners : {
			'celldblclick' : function() {
				
				//return false;  //返回false将双击不能变成可编辑状态
			},
			'cellcontextmenu' : function(g, r, c, e) {
				e.stopEvent();
				var menu = new Ext.menu.Menu({
					items : [{
						text : '编辑',
						handler : function() {
							g.startEditing(r, c);
						}
					}]
				});
				menu.showAt(e.getXY());
			}
		},
		changePageSize : function(pageSize) {
						if (pageSize != null && pageSize != '' && pageSize > 0 && pageSize != pagetb.pageSize) {
							pagetb.pageSize = parseInt(pageSize);
							this.store.load({
								params : {
									start : 0,
									limit : pagetb.pageSize
								}
							});
						}
		}
		
	});
	
	//store.load();
	
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
		var selectionModel = grid.getSelectionModel(); //资源Grid表中取出选中行
		var record = selectionModel.getSelected(); //取出对应记录
	});

	//grid.addListener('cellclick', cellclick);
	function cellclick(grid, rowIndex, columnIndex, e) {
	    var record = grid.getStore().getAt(rowIndex);   //Get the Record
	    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  //Get field name
	    var data = record.get(fieldName);
	    Ext.MessageBox.alert('提示','当前选中的数据是'+data);
	}		
	

	
	var win = new Ext.Window({
		title : '可编辑表格',
		modal : true,
		width : 900,
		autoScroll : true,
		closable : true,
		// resizable:true,
		items : [grid],
		x:200,
		y:5,
		buttons : [
			new Ext.Button({   
                text:"保存",
                minWidth:100,   
                id:"mybutton",
                //点击事件   
                listeners:{  
                    "click":function(){
                    	
                    	var m = store.getModifiedRecords();
						if (m.length == 0) {
							alert("没有更新的数据");
							return false;
						}
                    	var sSend = "["
						for (var i = 0, len = m.length; i < len; i++) {//married
							sSend = sSend + "{id:'" + m[i].data['id'] + "', married:'"+ m[i].data['married']+"'homepage:'"+ m[i].data['homepage']+ "',name:'"+m[i].data['name']+"',price:'"+m[i].data['price']+"', beginDate:'"+ m[i].data['beginDate'] +"'}";
							if (i < len - 1)
								sSend = sSend + ","
						}
						sSend = sSend + "]";
						sSend = Ext.util.JSON.encode(sSend);
						  
						alert(sSend);            
						//win.hide();
						win.close();
                    }
                }  
        })
		]
	})
	win.show();
	
});
</script>
	</head>
	<body>

<%--		<div id="hello"></div>--%>
	</body>
</html>

 

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    可编辑表格Ext.grid.EditorGridPanel

    Ext.grid.EditorGridPanel是Ext JS库中的一个组件，主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能，是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...

    EXT2.0 GRID 示例

    EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架，尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本，它提供了丰富的用户界面组件...

    ext 读取xml 可编辑grid

    在EXT JS框架中，"ext 读取xml 可编辑grid"是一个常见的需求，涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...

    Ext3.0 api帮助文档

    Ext3.0 API是Ext JS库的一个重要版本，它提供了丰富的JavaScript组件和接口，用于构建交互式的Web应用程序。这个API帮助文档包含了详细的功能说明、示例代码和类库结构，帮助开发者更好地理解和利用Ext3.0的功能。 ...

    老师整理的extjs学习笔记

    `Ext.grid.EditorGridPanel` 是一个扩展了 `Ext.grid.GridPanel` 的组件，允许直接在表格中编辑数据。它结合了表格视图和表单编辑功能，使得数据编辑变得更加直观。 #### 九、Ext.tree.TreePanel -- 树的使用 **...

    Ext TreePanel

    在示例代码中，可以看到如何创建一个包含可编辑列的`EditorGridPanel`，并使用`Ext.form.TextField`作为编辑器。`formatDate`函数用于格式化日期，`CheckboxSelectionModel`用于设置多选模式，而`CheckColumn`则用于...

    Extjs实用教程

    - **EditorGridPanel**: `Ext.grid.EditorGridPanel`，可编辑的表格组件。 - **GridPanel**: `Ext.grid.GridPanel`，表格组件。 - **PagingToolbar**: `Ext.PagingToolbar`，分页工具栏。 - **Panel**: `Ext....

    ExtJS增删改查

    在ExtJS框架中，Grid是一个非常关键的组件，主要用于展示表格数据，并支持数据的增删改查等基本操作。对于大多数Web应用程序而言，这种功能几乎是不可或缺的。下面我们将详细介绍如何使用ExtJS来实现这些功能。 ###...

    Ext表格控件和树控件

    除了基本的 `GridPanel` 外，Ext JS 还提供了一个更为强大的表格组件——`EditorGridPanel`。这个组件允许用户直接在表格中进行数据编辑。下面是一个简单的使用 `EditorGridPanel` 的示例： ```javascript Ext....

    ext3 gridRowEditor本地数据简单demo，有注释

    开发者可能会使用`Ext.grid.EditorGridPanel`，并为每个列定义一个`editor`属性来启用单元格编辑。同时，Store的配置可能包括数据源（即"data"），以及定义字段的`fields`属性。 在深入理解这个demo的过程中，你...

    extjs培训2011-12-17

    ExtJS是一个高级的JavaScript库，用于构建功能丰富的Web应用程序。此框架允许开发者创建出外观华丽且交互性极强的RIA（Rich Internet Applications）。ExtJS的优势在于它能够独立于后端技术进行开发，这意味着无论是...

    Extjs EditorGridPanel中ComboBox列的显示问题

    以下是一个示例代码片段，展示了如何解决这个问题： ```javascript // 部门列表的store var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "GetDepartmentJson.aspx", ...

    学习ExtJS Panel常用方法

    - `editorgrid`: `Ext.grid.EditorGridPanel` - `flash`: `Ext.FlashComponent` - `grid`: `Ext.grid.GridPanel` - `listview`: `Ext.ListView` - `panel`: `Ext.Panel` - `progress`: `Ext.ProgressBar` - `...

    ExtJs2.0简明教程

    为了熟悉ExtJS的基本用法，可以从创建一个简单的“Hello World”示例开始： ```javascript Ext.application({ name: 'MyApp', launch: function () { Ext.create('Ext.window.Window', { title: 'Hello World', ...

    Extjs 性能优化 High Performance ExtJs

    然而随着应用程序复杂度的提升，如何提高 Extjs 的性能成为了一个重要的课题。本文旨在针对具有一定 JavaScript 基础（理解面向对象、继承、作用域等概念）并且熟悉 Extjs 框架（了解组件间继承关系）的开发者，提供...

    ExtJS基础教程.pdf

    4. **表格类**：包括网格面板(GridPanel)、编辑网格面板(EditorGridPanel)、属性网格(PropertyGrid)、视图(View)、分组视图(GroupingView)、列模型(ColumnModel)和选择模型(SelectionModel)，支持复杂的数据展示和...

Magicbox
Global site tag (gtag.js) - Google Analytics