`

ext grid实例

    博客分类:
  • ext
阅读更多

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
			}
		});
	}
分享到:
评论

相关推荐

    一个很好的EXTGRID实例

    在"一个很好的EXTGRID实例"中,我们可以看到一个BS(Browser/Server)架构的应用,它采用EXT GRID作为用户界面的核心部分,用于显示和管理人员信息。BS架构意味着大部分业务逻辑和数据显示都在浏览器端处理,而...

    ext grid网格控件实例

    在测试EXT Grid实例之前,确保已经下载了EXT JS库文件,包括CSS样式表、JavaScript库和必要的图片资源。EXT Grid的配置涉及很多方面,如列定义、排序、过滤、编辑等,需要根据具体需求进行定制。同时,理解EXT JS的...

    ext grid 导出excel 代码实例

    1. **创建EXT Grid**:首先,你需要创建一个EXT Grid实例,定义列模型、数据源、以及任何其他必要的配置项。例如,你可以使用`Ext.create('Ext.grid.Panel', { ... })`来创建Grid,并设置`columns`,`store`等属性。...

    Ext grid 分页实例源码

    Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码

    Ext grid 简单实例

    在这个"Ext Grid简单实例"中,我们将探讨如何从Web服务提取数据并将其在Grid中显示。 首先,让我们了解基本的Ext Grid组成部分: 1. **Store**: Store是数据存储的地方,它可以连接到不同的数据源,如JSON、XML或...

    Ext grid与树实例

    同样,"extdemo"可能包含了如何创建、配置和操作Tree的实例代码。 在"extdemo"中,这两个组件可能被结合使用,形成一种混合视图,即在一个Grid中显示扁平化的数据,而在一个Tree中显示层级化的数据。这样的组合使得...

    Ext Grid +dwr 列表展示展示带分页

    2. **创建Ext Grid**: 在前端,我们需要创建一个Ext Grid实例,并定义列模型、数据存储和分页配置。列模型定义了表格的列,数据存储负责管理数据,而分页配置则指定如何进行分页操作。 3. **设置数据源**: 使用DWR...

    ExtGrid使用

    在本例中,开发者创建了一个具有这些特性的ExtGrid实例。 3. **数据展示**:在ExtGrid中,数据通常通过Store组件进行管理。Store负责加载、存储和管理数据,可以与各种数据源(如JSON、XML、CSV等)交互。Grid会...

    ext的grid简易例子

    本教程将通过一个简单的EXT Grid实例,帮助你理解和掌握EXT Grid的基本用法。 首先,EXT Grid的基础构建涉及到以下几个主要组件: 1. **Store**:存储数据的容器,可以是JSON格式、数组或者从服务器动态获取。在...

    EXT2.0 GRID 示例

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

    一个EXT+js实现的Grid表格合并的例子源码

    通过深入理解EXT Grid的工作原理,结合上述方法,开发者可以创建出具有单元格合并功能的EXT Grid实例。这个例子源码将是一个很好的学习资源,帮助开发者掌握EXT Grid的高级用法,并能应对实际项目中的复杂需求。

    Ext Grid表格的自动宽度及高度的实现

    在这个示例中,`grid`对象是一个`Ext.grid.GridPanel`实例,它包含了数据存储(`store`)、列定义以及样式配置等。值得注意的是`width`和`height`属性的设置方式,正是我们前面讨论的动态尺寸调整策略。 ### 小结 ...

    ext tree grid 的高级实例运用

    在"ext tree grid 的高级实例运用"中,我们将深入探讨如何有效地结合这两个组件,实现复杂的交互功能。EXT JS允许开发者创建具有拖放功能、节点信息展示、增删修改以及多级选择的树形网格视图,从而提供更加直观和...

    EXT复杂表头+锁定列例子

    2. 创建EXT Grid实例:定义一个EXT Grid配置对象,包括数据源、列定义、复杂表头配置等。 3. 定义复杂表头:使用嵌套的header配置来创建多级标题。 4. 配置锁定列:指定需要锁定的列,并设置`lockable`和`locked`...

    ext grid 显示数据

    在"LearningExtJS 第五章节的翻译"中,我们可以期待找到关于EXT JS Grid的详细讲解和实例应用。 EXT JS的Grid组件提供了丰富的功能,如分页、排序、过滤、编辑等,可以灵活地适应各种业务需求。以下是一些关于EXT ...

    Ext Grid控件的高级应用

    本实例使用官方Ext3.1包 分五个部分 1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢

    extgrid导出excel

    这里的`exportGrid`函数接收三个参数:要导出的Grid实例,导出的文件类型(这里是'Excel'),以及生成的文件名。 4. **处理浏览器兼容性**:由于不同浏览器对文件下载的支持程度不同,可能需要使用一些库(如...

    JSP中使用EXT实现grid table

    4. 创建Grid:实例化Grid Panel,设置列配置和Store。 5. 显示Grid:将Grid添加到页面布局中,确保它能被正确渲染。 6. 配置Ajax请求:处理Ajax请求和响应,通常通过EXT的Proxy组件完成。 7. 如果需要,添加...

    基于EXT2.0.2表格间数据拖拽

    首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的DataStore,存储各自的数据。DataStore通常与XML或者JSON数据源连接,可以动态加载和更新数据。在Grid中,我们可以通过配置ColumnModel来定义显示的列。 ...

    Ext grid合并单元格

    最后,创建 Grid 实例时,设置了视图配置 `viewConfig`,指定了模板。此外,还创建了数据存储 `store` 和列模型 `colM`,并将其传递给了 Grid。 ```javascript var grid = new Ext.grid.EditorGridPanel({ render...

Global site tag (gtag.js) - Google Analytics