/**
* 将流程中grid的字段专成grid表单显示
* author :zyj
* @param {} v 值 format: key1:val1,key2:val2...;,key11:val11,key22:val22...;...
* @param {} elId 需要渲染的结点ID
*/
function vToGrid(v,elId) {
var cmItems = [new Ext.grid.RowNumberer()];
var record=v.split(";")
var headerTmp= record[0].split(",");
var fields=[];
for(var i=0;i<headerTmp.length;i++){
var htmp=headerTmp[i].split(":");
if((htmp[0].indexOf('ID')==-1)&&(htmp[0].indexOf('主键')==-1)){
cmConfig = {
header: headerTmp[i].split(":")[0],
tooltip:headerTmp[i].split(":")[0],
dataIndex: 'indexTmp'+i,
sortable: true ,
renderer:function(value){
return '<div align="center">'+value+'</div>';
}
};
fields.push('indexTmp'+i)
cmItems.push(cmConfig);
}
}
var cm = new Ext.grid.ColumnModel(cmItems);
var sqldata = new Array();
for (var t = 0; t < record.length; t++) {
if(!(record[t]==null||record[t]==''||record[t].length==0)){
var recordTmp= record[t].split(",");
var oneData = new Array();
for(var tt=0;tt<recordTmp.length;tt++){
if(recordTmp[tt].indexOf(":")!=-1){
var ttmp=recordTmp[tt].split(":");
if((ttmp[0].indexOf("ID")==-1)
&&(ttmp[0].indexOf("主键")==-1)){
if(ttmp.length=2){
oneData.push(ttmp[1]);
}else{
oneData.push(" ");
}
}
}
}
sqldata.push(oneData);
}
}
var store = new Ext.data.SimpleStore({
fields:fields
});
store.loadData(sqldata);
var gd = new Ext.grid.GridPanel({
renderTo : elId,
cm : cm,
width : '98%',
store : store,
region:'center',
trackMouseOver : true,
disableSelection : false,
loadMask : true,
autoHeight : true,
viewConfig : {
// autoFill : true, //自动填充
forceFit : true,
scrollOffset: 0 //不加这个的话,会在grid的最右边有个空白,留作滚动条的位置
//showPreview : false
},
stripeRows: true,//斑马线
bodyStyle : 'width:100%;',
align : 'center'
});
}
分享到:
相关推荐
我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...
EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...
4. **定义EXTJS Grid面板**:创建一个EXTJS的Grid面板,包含上面配置的ColumnModel和Store。Grid面板还可以定义其他属性,如分页、排序和过滤功能。 5. **渲染Grid**:在页面加载完成后,使用EXTJS的`Ext.onReady`...
本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对本地store进行筛选。 1. **Grid过滤基础** - **Filter Model**:ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器,用户可以根据需要...
在这个"extjs动态表格实例"中,我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先,让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件,它用于展示结构化数据,并支持多种操作,如排序...
8. **源代码分析**:app.js文件很可能是实现这个功能的主脚本,它包含了创建Grid、设置DragDrop对象、监听事件和处理数据的代码。通过阅读和理解这个文件,你可以学习到如何在实际项目中实现Grid2Grid拖拽。 最后,...
在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...
6. 动态生成:通过JavaScript代码动态创建ColumnModel和Store,从而实现表格的动态生成。 通过理解和掌握这些知识点,开发者可以构建出高度灵活、响应式的前端表格应用,同时充分利用后端数据源提供动态内容。
它提供了丰富的组件库,包括数据网格(Grid)等,使得开发者能够创建交互性极强的数据展示和管理界面。这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一...
总结,ExtJs 6.5 Grid列表导出涉及到的主要知识点有:Grid组件的结构与操作,数据存储与获取,CSS规则的解析与应用,HTML表格的动态构建,以及文件的本地保存。通过熟练掌握这些知识点,开发者可以构建出高效且具有...
EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...
它提供了一套完整的组件模型,包括数据网格(Grid)等,使得开发者能够创建功能强大的用户界面。本篇我们将聚焦于ExtJS 5中的一个特定特性:Grid与Grid之间数据的拖放操作。在"ExtJS5学习之Grid与Grid之间的数据拖拽...
ExtJS Grid是一款强大的JavaScript组件,用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发,是Ext JS库的核心部分,广泛应用于企业级应用的前端开发,提供丰富的功能和高度的可定制性。这个"ExtJS_grid...
首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页等功能,并且可以自定义列样式和行为。在ExtJS4中,我们可能有以下场景:用户在Grid...
在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。在实际应用中,为了提供更好的用户体验,我们经常需要在鼠标悬停在某个单元格或列头时显示额外的信息,这就是ToolTip的效果。EXTJS ...
EXTJS4的树组件支持动态加载、拖放操作、节点的增删改查等功能。通过配置store、model和节点渲染器,我们可以定制树的显示效果和交互行为。 接着,网格(Grid)组件是EXTJS的核心组件之一,用于展示大量数据并支持...
这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...
// 创建Grid var grid = new Ext.grid.GridPanel({ store: dataStore, // 数据源 columns: gridColumns, // 其他Grid配置... }); ``` 通过这种方式,我们可以将Grid的定义和应用逻辑分离,使代码更易于维护。...
在讨论ExtJs实现动态加载grid的完整示例之前,我们需要了解ExtJs框架中一些基础组件的作用。ExtJs是一个基于JavaScript的框架,广泛用于构建丰富互联网应用(RIA)。ExtJs提供了大量预构建的组件,这些组件可以通过...
3. **动态更新**:数据模型(Record)中的进度值变化时,Grid自动更新显示。 4. **事件配合**:结合后台数据更新事件,实时刷新进度信息。 **五、实际应用** 1. **示例代码**:`TestExtjsProgressGrid`可能是实现...