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实例"中,我们可以看到一个BS(Browser/Server)架构的应用,它采用EXT GRID作为用户界面的核心部分,用于显示和管理人员信息。BS架构意味着大部分业务逻辑和数据显示都在浏览器端处理,而...
在测试EXT Grid实例之前,确保已经下载了EXT JS库文件,包括CSS样式表、JavaScript库和必要的图片资源。EXT Grid的配置涉及很多方面,如列定义、排序、过滤、编辑等,需要根据具体需求进行定制。同时,理解EXT JS的...
1. **创建EXT Grid**:首先,你需要创建一个EXT Grid实例,定义列模型、数据源、以及任何其他必要的配置项。例如,你可以使用`Ext.create('Ext.grid.Panel', { ... })`来创建Grid,并设置`columns`,`store`等属性。...
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
在这个"Ext Grid简单实例"中,我们将探讨如何从Web服务提取数据并将其在Grid中显示。 首先,让我们了解基本的Ext Grid组成部分: 1. **Store**: Store是数据存储的地方,它可以连接到不同的数据源,如JSON、XML或...
同样,"extdemo"可能包含了如何创建、配置和操作Tree的实例代码。 在"extdemo"中,这两个组件可能被结合使用,形成一种混合视图,即在一个Grid中显示扁平化的数据,而在一个Tree中显示层级化的数据。这样的组合使得...
2. **创建Ext Grid**: 在前端,我们需要创建一个Ext Grid实例,并定义列模型、数据存储和分页配置。列模型定义了表格的列,数据存储负责管理数据,而分页配置则指定如何进行分页操作。 3. **设置数据源**: 使用DWR...
在本例中,开发者创建了一个具有这些特性的ExtGrid实例。 3. **数据展示**:在ExtGrid中,数据通常通过Store组件进行管理。Store负责加载、存储和管理数据,可以与各种数据源(如JSON、XML、CSV等)交互。Grid会...
本教程将通过一个简单的EXT Grid实例,帮助你理解和掌握EXT Grid的基本用法。 首先,EXT Grid的基础构建涉及到以下几个主要组件: 1. **Store**:存储数据的容器,可以是JSON格式、数组或者从服务器动态获取。在...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...
通过深入理解EXT Grid的工作原理,结合上述方法,开发者可以创建出具有单元格合并功能的EXT Grid实例。这个例子源码将是一个很好的学习资源,帮助开发者掌握EXT Grid的高级用法,并能应对实际项目中的复杂需求。
在这个示例中,`grid`对象是一个`Ext.grid.GridPanel`实例,它包含了数据存储(`store`)、列定义以及样式配置等。值得注意的是`width`和`height`属性的设置方式,正是我们前面讨论的动态尺寸调整策略。 ### 小结 ...
在"ext tree grid 的高级实例运用"中,我们将深入探讨如何有效地结合这两个组件,实现复杂的交互功能。EXT JS允许开发者创建具有拖放功能、节点信息展示、增删修改以及多级选择的树形网格视图,从而提供更加直观和...
2. 创建EXT Grid实例:定义一个EXT Grid配置对象,包括数据源、列定义、复杂表头配置等。 3. 定义复杂表头:使用嵌套的header配置来创建多级标题。 4. 配置锁定列:指定需要锁定的列,并设置`lockable`和`locked`...
在"LearningExtJS 第五章节的翻译"中,我们可以期待找到关于EXT JS Grid的详细讲解和实例应用。 EXT JS的Grid组件提供了丰富的功能,如分页、排序、过滤、编辑等,可以灵活地适应各种业务需求。以下是一些关于EXT ...
本实例使用官方Ext3.1包 分五个部分 1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
这里的`exportGrid`函数接收三个参数:要导出的Grid实例,导出的文件类型(这里是'Excel'),以及生成的文件名。 4. **处理浏览器兼容性**:由于不同浏览器对文件下载的支持程度不同,可能需要使用一些库(如...
4. 创建Grid:实例化Grid Panel,设置列配置和Store。 5. 显示Grid:将Grid添加到页面布局中,确保它能被正确渲染。 6. 配置Ajax请求:处理Ajax请求和响应,通常通过EXT的Proxy组件完成。 7. 如果需要,添加...
首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的DataStore,存储各自的数据。DataStore通常与XML或者JSON数据源连接,可以动态加载和更新数据。在Grid中,我们可以通过配置ColumnModel来定义显示的列。 ...
最后,创建 Grid 实例时,设置了视图配置 `viewConfig`,指定了模板。此外,还创建了数据存储 `store` 和列模型 `colM`,并将其传递给了 Grid。 ```javascript var grid = new Ext.grid.EditorGridPanel({ render...