当前位置:首页 > 开发 > Web前端 > Ext > 正文

ext grid实例

发表于: 2012-09-20   作者:blackproof   来源:转载   浏览次数:
摘要: ext grid的实例 代码     //数据加载到列表 type 1 新增record; type 2 完整record function showSemanticsData(type,data,renderDivID) { document.getElementById(renderDivID).innerHTML = "";

ext grid的实例 代码

 

 

//数据加载到列表 type 1 新增record; type 2 完整record
	function showSemanticsData(type,data,renderDivID)
	{
		document.getElementById(renderDivID).innerHTML = "";
		var columns = [{
			text:'id',
			dataIndex:'id',
			hidden:true,
			sortable:true
		},{
			text:'语义描述',
			dataIndex:'sentence'
		},
		{
			text:'模板SQL',
			dataIndex:'templatesql'
		},
		{
			text:'关联表',
			dataIndex:'tableids'
		}];
		var dbclick = function(){};
		if(type == 2){
			columns[4] = {
				menuDisabled: true,
                sortable: false,
                xtype: 'actioncolumn',
                width: 30,
                emptyCellText:'删除',
                items:[{
                icon   : '../../static/vbap/delete.gif',  // Use a URL in the icon config
                tooltip: 'Sell stock',
                handler: function(grid, rowIndex, colIndex) {
                	Ext.MessageBox.confirm("确认","是否删除",function(btn){
                        if(btn == "yes"){
                        	var id = grid.getStore().getAt(rowIndex).get('id');//get value of grid
                        	Ext.Ajax.request({
                        		url:"./removeSemantics",
                        		params:{id:id},
                        		success:function(r,o){
                        			grid.getStore().removeAt(rowIndex);//remove table row
                        			},
                        		failure:function(){
                        			Ext.Msg.alert("删除语义库记录错误","删除语义库记录错误");
                        		}
                        	});
                        }
                    });  
                	}//handler end
                },//icon end
                {
                	text:'删除'
                }]
			};// column item end
		}
		else{
			dbclick = function(grid,rowIndex,colIndex){showItem(grid,colIndex,rowIndex);};
		}
		//dbclick = function(grid,rowIndex,colIndex){showItem(grid,colIndex,rowIndex);};//TODO:测试用例语句
		var dsArray = new Array();//json数据源
		//赋值数据到json数据源
		for(var i=0;i<data.length;i++){
			var col = data[i];
			var tbinfo = new Array();
			tbinfo.push(col["id"]);
			tbinfo.push(col["sentence"]);
			tbinfo.push(col["templatesql"]);
			tbinfo.push(col["tableids"]);
			dsArray.push(tbinfo);
		}
		Ext.define('semanticList',{
			extend:'Ext.data.Model',
			fields:[
			        {name:'id'},
			        {name:'sentence'},
			        {name:'templatesql'},
			        {name:'tableids'}
			]
		});
		var fstore = Ext.create('Ext.data.ArrayStore',{
			model:'semanticList',
			data:dsArray
		});
		var tbGrid = Ext.create('Ext.grid.Panel',{
			renderTo : renderDivID,
			id : renderDivID+"Grid",//传对象,不用id取列表
			store : fstore,
			title:'语义库',
			resizable:false,
			autoScroll:true,
			region:'center',
			collapsible:true,
			frame:true,
			layout:{type:'hbox'},
			forceFit:true,
			columns:columns,
			listeners:{
				itemdblclick:dbclick
			}
		});
	}

ext grid实例

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在做eclipse插件时经常会用的属性列表,也没有做好记录,现在都不知道是怎么做的了,只是觉得当时做
使用Ext可以说最多的就是Grid了,它可以方便的展示列表数据并能够对数据分页和排序。 下面从最简单G
看效果图: 前台代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
设置Ext Grid的样式为: style : { padding : '1px 20px 20px 20px', height : '100%', //width : '
<ext:gridPanel var="gridView" region="center" frame="true" autoExpandColumn="grid_name" li
Ext合并表头并不难,需要引入一个开源的扩展文件GroupHeaderPlugin.js和GroupHeaderPlugin.css 现在
Ext.onReady(function() { var store = getJsonStore(); var cols = getCols(); var pagingbar = ge
Ciao everybody, I have a problem with the grid Width. How can I tell to the grid to get the s
AJAX 入门视频之 Ext 2.0.1 Grid 增删改 & DWR 1 实例 说实话, 我也是特别懒的人, 很早就想看看 Ext
您可以查看在线演示(不带服务器端代码): http://beansoft.java-cn.org/ajax/extgrid/ 源代码下载(带
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号