ext grid实例

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
			}
		});
	}