您的位置：360文档中心› Extjs中grid中添加连接并实现数据关联

Extjs中grid中添加连接并实现数据关联

合集下载

Extjs Grid 编辑 新增 删除 保存

Extjs Grid 编辑 新增 删除 保存
transform:'area',// 对应的选择框的ID
lazyRender:true,
listClass: 'x-combo-list-small'
})
},
// 列模型定义了表格所有列的信息,
// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
var cm = new Ext.grid.ColumnModel([
{
id:'id',
iconCls:'sc01',
handler : function(){
//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
format: 'y/m/d',
minValue: '1970/01/01',//最小值
disabledDays: [0, 6],// 禁止选择的日期
disabledDaysText: '不许周末出生孩子'
header: "编号",
dataIndex: 'id',
width: 50
},
{
id:'name',
header: "用户名",
dataIndex: 'name',
}
// 格式化性别显示,这是个 renderer, 渲染器
function formatSex(value) {
return value ? "男" : "女";

ExtJs在grid中选中一行数据,显示在下面的form中

ExtJs在grid中选中一行数据,显示在下面的form中

ExtJs在grid中选中一行数据,显示在下面的form中需求：页面分为两个部分，第一部分为grid显示数据，第二部分为formPanel显示数据，过程如下，调用过程1，将数据显示在grid 中，选中grid中的一条数据，得到这条数据的一个cashcode，然后再将cashcode作为参数，调用过程2到数据库中查询数据，这时将查询到的数据放到一个store中，同时调用一个回调函数将这条数据插入到formPanel中。

整个事件的处理过程都是在选中grid中的一条数据时执行的。

所以在grid中的CheckboxSelectionModel中执行主要代码如下：-------------------------------------------------------------------------------------this.themeCheckbox = new Ext.grid.CheckboxSelectionModel( {singleSelect : true,checkOnly : false,listeners : {rowselect : function(obj, rowIndex, record) {//选中某一行执行以下操作var record = Ext.getCmp(_this.genId("main")).getSelectionModel().getSelecte d();//获取被选中的这一行if (record) {if(record.get("cashcode") == null || record.get("cashcode") == ""){return;}//这里的formStore是一个获取数据的store,在这里加载时传递从grid中获取的参数cashcode传递到后台formStore.load({params : {cashcode:record.get("cashcode"),start : 0,limit : gLimit},//重要的是这里，一个回调函数，调到数据加载到formPanel中，注意向formPanel中只能加载一条数据callback : function(r , options ,success){if (r) {//选中行后加载formStore赋值给formpanel_formPanel.form.loadRecord(r[0]);//r[0]获取一条数据}/*for (var i = 0; i < conrulesStoreF.getCount(); i++) {var record = conrulesStoreF.getAt(i);alert(record.get('cashcode'));}*///Ext.getCmp(conrulesStoreF.getById('cashcode')).setValue(r ecord.get("cashcode"));}});}}}});。

ExtJS中表格控件的使用,属性设置和数据的获取

ExtJS中表格控件的使用,属性设置和数据的获取

ExtJS中表格控件的使用，属性设置和数据的获取ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：JsonStore，SimpleStore，GroupingStore…一个表格的基本编写过程：1、创建表格列模型var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role'},{header: '等级', dataIndex: 'grade'},{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //创建日期类型的数据});2、创建数据数组var data = [['士兵','7','2011-07-2412:34:56'],['将军','10','2011-07-2412:34:56'],];3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式ArrayReader的mapping用来设置列的排列顺序var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}{name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'} //创建日期列和显示格式])});store.load();4、创建GridPanel，装配ColumnModel和storevar grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cm});另外获取远程数据可以使用ScriptTagProxy,如下所示var store = new Ext.data.Store({proxy: new Ext.data.ScriptTagProxy({url:'http://...'}),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}]),sortInfo: {field: "role", direction: "ASC"} //设置默认排序列，ASC/DESC });表格的常用属性功能var grid = new Ext.grid.GridPanel({enableColumnMove: false, //禁止拖放列enableColumnResize: false, //禁止改变列的宽度stripeRows: true, //斑马线效果loadMask: true, //读取数据时的遮罩和提示功能renderTo: 'grid',store: storecm: cm});var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role', width:90, sortable: true}, //width 设置列宽度，默认为100px，sortable设置排序功能{id:'grade', header: '等级', dataIndex: 'grade', width:40}});var grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cmviewConfig:{ //让每列自动填充满表格forceFit: trueautoExpandColumn: 'grade' //自动延伸列，列的id在ColumnModel中定义});渲染表格，为表格设置特殊样式只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。

Extjs的grid的单元格中加载超链接和按钮

Extjs的grid的单元格中加载超链接和按钮

Extjs的grid的单元格中加载超链接和按钮效果：户型图列显示的图片实际上就是一个超链接。

添加一个Button分2个步骤：1.在列头中定义超链接列或者Button列的HTML代码，也就是Render2.添加该Button的事件处理函数。

其中，gridPanel应作为参数传入该函数。

应该在gridPanel初始化时定义:(1)cellClick的listener：cellClick(2)cellClick事件的处理函数：onCellClick列头定义的代码如下：[javascript] view plaincopy1.var cm = new Ext.grid.ColumnModel([2.,3.new Ext.grid.RowNumberer(), //自动添加行号4.5.{6.header: "房间编号",7.dataIndex: "RoomNumber",8.//可以进行排序9.sortable: true10.11.}, {12.header: "户型结构",13.dataIndex: "huxingjiegou",14.//可以进行排序15.isHidden: true,16.sortable: true17.18.}, {19.header: "面积(M2)",20.dataIndex: "area",21.//可以进行排序22.sortable: true23.24.}, {25.header: "单价(元/M2)",26.dataIndex: "singlePrice",27.//可以进行排序28.sortable: true29.// editor: new Ext.grid.GridEditor(new Ext.form. NumberField({30.// allowBlank: false31.// }))32.33.}, {34.header: "总价(元)",35.dataIndex: "totalPrice",36.//可以进行排序37.sortable: true38.39.}, {40.header: "面积(M2)",41.dataIndex: "mianjiCC",42.//可以进行排序43.sortable: true44.45.}, {46.header: "单价(元/M2)",47.dataIndex: "priceCCS",48.//可以进行排序49.sortable: true50.// editor: new Ext.grid.GridEditor(new Ext.form. NumberField({51.// allowBlank: false52.// }))53.54.}, {55.header: "总价(元)",56.dataIndex: "totalPriceCCS",57.//可以进行排序58.sortable: true59.60.}, {61.header: "面积(M2)",62.dataIndex: "mianjiCK",63.//可以进行排序65.66.}, {67.// header: "单价(元/M2)",68.header: "总价(元/M2)",69.dataIndex: "priceCK",70.//可以进行排序71.sortable: true72.// editor: new Ext.grid.GridEditor(new Ext.form. NumberField({73.// allowBlank: false74.// }))75.76.},77.78.79.{80.header: "",81.dataIndex: "totalPriceALL",82.//可以进行排序83.sortable: true84.85.},86.87.header: "户型图",88.tooltip: "户型图",89.90.width: 120,91.locked: true,92.menuDisabled: true,94.dataIndex: "huxingPic",95.renderer: function (data, metadata, record, rowIndex, columnIndex, store) {96.var picture = store.getAt(rowIndex).get('huxingPic');97.98.return'<a href="' + picture + '">' + '<img src="' + pi cture + '"width=60 hight=50> </a>';99.100.}101.102.{103.header: "订购",104.105.renderer: function (value, meta, record) {106.107.var formatStr = "<button onclick='javscript:return fal se;' class='order_bit'>订购</button>";108.var resultStr = String.format(formatStr);109.return"<div class='controlBtn'>" + resultStr + "</div >";110.} .createDelegate(this),111.css: "text-align:center;",112.// width: 30,113.sortable: false114.}115.116.]);注意超链接为'<a href="' + picture + '">'，而按钮为return"<div class='controlBtn'>"按钮处理事件的代码如下：[javascript] view plaincopy1.//按钮点击事件2.grid.on('cellclick', function (grid, rowIndex, columnIndex,e) {3.var btn = e.getTarget('.controlBtn');4.var get = e.getTarget('.get');5.6.if (get) {7.var t = e.getTarget();8.record = grid.getStore().getAt(rowIndex);9.var control = t.className;10.row = grid.getSelectionModel().getSelected(); //得到选择所有行11.rowIndexId = rowIndex;12.this.GetRoomDetails(record, rowIndexId, projectName , loudongName); //传行一行记录直接加载13.}14.if (btn) {15.16.var t = e.getTarget();17.record = grid.getStore().getAt(rowIndex);18.var control = t.className;19.row = grid.getSelectionModel().getSelected(); //得到选择所有行20.switch (control) {21.22.case'sale_already':23.{24.var state = "已售";25.// this.SetSaleState(record,state)26.this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)27.}28.break;29.case'order_bit':30.{31.var state = "大定";32.// this.SetSaleState(record,state)33.this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)34.}35.break;36.}37.}38.},39.this);。

extjs 表头 pluginsgroupheadergrid 实现原理

extjs 表头 pluginsgroupheadergrid 实现原理

extjs 表头 pluginsgroupheadergrid 实现原理
ExtJS 的 plugins/groupheadergrid 插件是用来实现表头分组的功能的。

它的实现原理如下：
1. 首先，该插件会在 Ext.grid.Panel 的初始化阶段，生成一个
配置项 groupHeaderConfig，用来设置表头分组的相关信息，
如分组标题、列宽度等。

2. 在 Ext.grid.HeaderContainer 类的 initComponent 方法中，会
根据 groupHeaderConfig 配置项，生成表头分组的相关 DOM
结构。

3. 对于每一个分组，会生成一个包含分组标题和分组内列的DOM 元素，以及一个包含分组标题和列的 wrapper 元素。

4. 分组标题和列的 DOM 元素会添加相应的样式类，以便通过CSS 控制它们的样式。

5. 在 Ext.grid.feature.Grouping 类的 init 方法中，会将分组标题
和列的 wrapper 元素分别添加到表头容器的主体和锁定主体中。

6. 在 Ext.grid.feature.Grouping 类的 render 方法中，会根据数据源中的分组信息，修改每个分组的可见性和展开/折叠状态。

7. 当用户点击分组标题时，会触发相应的事件处理程序，根据当前分组的展开/折叠状态，进行相应的操作。

总结起来，extjs 表头 plugins/groupheadergrid 插件的实现原理主要涉及生成分组标题和列的 DOM 结构，以及控制分组展开/折叠状态的处理。

同时，它通过 CSS 控制样式，以实现不同的分组样式和行为。

[计算机]extjs gridpanel的应用-精品文档

[计算机]extjs gridpanel的应用-精品文档

Grid.js页面space("test.grid");/*store最少需要两个参数 1 DataProxy 用于访问一个数据连接2 reader 主要有三个实现类Ext.data.JsonReader or XMLReader or ArrayReader* 其中JsonReader用于接受一个Json响应后（即DataProxy响应的数据）创建一个Record对象组成的数组。

* 数组内的每个对象都是EXt.Data.Record 映射的结果（即Json数据与页面显示列的对应关系 *///1 DataProxy的生成var proxy_url ='data.jsp';//创建URL访问类var _proxy =new Ext.data.HttpProxy({url:proxy_url});//数据问题参数var _jsonProperty="totalProperty";//数据根目录参数var _jsonRoot ="root";//Record显示列表对应关系var _record = [{name:'name',mapping:'name'},{name:'sex',mapping:'sex'},{name:'age',mapping:'age'},{name:'code',mapping:'code'}];//创建JSONReader对象,需要设置记录总数，根目录名称，记录映射var _reader =newExt.data.JsonReader({idProperty:'name',totalProperty:_jsonProperty,root :_jsonRoot},_record);/***封装了一个客户端的Record对象缓存。

Extjs 4.2 Grid增删改及后台交互

Extjs 4.2 Grid增删改及后台交互

Posted 周二, 07/02/2013 - 12:20 by admin上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。

苦于抽不出时间，一直拖到现在。

不得不说，Extjs确实很强大，新版的Neptune 风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。

抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。

发现这种方式挺不错的，故而分享下。

代码Example如下：定义Modelview sourceprint?01.Ext.define('Person', {02.extend: 'Ext.data.Model',03.fields: [{name: 'id',04.type: 'int',eNull: true06.}, 'email', 'first', 'last'],07.validations: [{ type: 'length',08.field: 'email',09.min: 110.}, {type: 'length',11.field: 'first',12.min: 113.}, {type: 'length',14.field: 'last',15.min: 116.}]17.});构造store、创建panelview sourceprint?001.var store = Ext.create('Ext.data.Store', {002.autoLoad: true,003.autoSync: true,004.model: 'Person',005.proxy: {006.type: 'ajax',007.api: {008.read: 'url/read',//查询009.create: 'url/create',//创建010.update: 'url/update',//更新011.destroy: 'url/destroy'//删除012.},013.reader: {014.type: 'json',015.root: 'data'016.},017.writer: {018.type: 'json'019.}020.},021.listeners: {022.write: function(store, operation){023.var record = operation.getRecords()[0], = Ext.String.capitalize(operation.action), 025.verb;026.027.028.if(name == 'Destroy') {029.record = operation.records[0];030.verb = 'Destroyed';031.} else{032.verb = name + 'd';033.}034.Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));035.036.}037.}038.});039.040.var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {041.listeners: {042.cancelEdit: function(rowEditing, context) {043.// Canceling editing of a locally added, unsaved record: remove it044.if(context.record.phantom) {045.store.remove(context.record);046.}047.}048.}049.});050.051.var grid = Ext.create('Ext.grid.Panel', {052.renderTo: document.body,053.plugins: [rowEditing],054.width: 400,055.height: 300,056.frame: true,057.title: 'Users',058.store: store,059.iconCls: 'icon-user',060.columns: [{061.text: 'ID',062.width: 40,063.sortable: true,064.dataIndex: 'id'065.}, {066.text: 'Email',067.flex: 1,068.sortable: true,069.dataIndex: 'email',070.field: {071.xtype: 'textfield'072.}073.}, {074.header: 'First',075.width: 80,076.sortable: true,077.dataIndex: 'first',078.field: {079.xtype: 'textfield'080.}081.}, {082.text: 'Last',083.width: 80,084.sortable: true,085.dataIndex: 'last',086.field: {087.xtype: 'textfield'088.}089.}],090.dockedItems: [{091.xtype: 'toolbar',092.items: [{093.text: 'Add',094.iconCls: 'icon-add',095.handler: function(){096.// empty record097.store.insert(0, new Person());098.rowEditing.startEdit(0, 0);099.}100.}, '-', {101.itemId: 'delete',102.text: 'Delete',103.iconCls: 'icon-delete',104.disabled: true,105.handler: function(){106.var selection =grid.getView().getSelectionModel().getSelection()[0]; 107.if(selection) {108.store.remove(selection);109.}110.}111.}]112.}]113.});114.grid.getSelectionModel().on('selectionchange', function(selModel, selections){115.grid.down('#delete').setDisabled(selections.length === 0);很简单，使用api的方式，包括有增删查改，在前台的操作都会被extjs记录下来，再执行sync 的时候就可以自动根据状态请求相应的url了。

Extjs教程 第六章 Editor Grids(可编辑表格)

Extjs教程 第六章 Editor Grids(可编辑表格)

Editor Grids（可编辑表格）在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。

但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。

幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。

它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。

在这章里，我们将会学到：∙为用户提供连接到data store的可编辑表格；∙把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据；∙通过编码操控grid并对事件做出相应；∙教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。

但是，首先，我们要看看可以用可编辑表格能够做什么事情。

我们能用可编辑表格做什么？EditorGridPanel和我们之前使用到的表单（form）很相似。

实际上，editor gird使用了和form中完全一样的表单字段。

通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。

包括输入约束以及数值验证等。

把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。

这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。

使用可编辑的表格：可编辑和不可编辑表格的区别十一个相当简单的开始的过程。

复杂的使我们需要处理编辑状态然后传回服务器。

但是一旦你学会了如何去做，这部分也就同样变得相当的简单。

让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。

修改后的代码如下所示：var title_edit = new Ext.form.TextField();var director_edit = new Ext.form.TextField({vtype: 'name'});var tagline_edit = new Ext.form.TextField({maxLength: 45});var grid = new Ext.grid.EditorGridPanel({renderTo: document.body,frame:true,title: 'Movie Database',height:200,width:520,clickstoEdit: 1,store: store,columns: [{header: "Title", dataIndex: 'title',editor: title_edit},{header: "Director", dataIndex: 'director',editor: director_edit},{header: "Released", dataIndex: 'released',renderer:Ext.util.Format.dateRenderer('m/d/Y')},{header: "Genre", dataIndex: 'genre',renderer: genre_name},{header: "Tagline", dataIndex: 'tagline',editor: tagline_edit}]});为了让grid可编辑，我们需要做四件事情。

ExtJS5学习之Grid与Grid之间的数据拖拽

ExtJS5学习之Grid与Grid之间的数据拖拽

ExtJS5学习之Grid与Grid之间的数据拖拽拖拽是一个提升用户体验的一个特色功能，虽然不是必需的，但如果添加上此功能，必然就立马变得高大上了，有木有。

Grid与Grid之间的数据拖拽是由gridviewdragdrop 插件，官方源码已经内置了该插件，无须自己实现，进行一些简单配置就完事儿了。

下面是示例代码：Js代码Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]); Ext.define('DataObject', { extend: 'Ext.data.Model', fields: ['name', 'column1','column2'] }); Ext.onReady(function(){ var myData = [ { name : "Rec 0", column1 : "0", column2 : "0" }, { name : "Rec 1", column1 : "1", column2 : "1" }, { name : "Rec 2", column1 : "2", column2 : "2" }, { name : "Rec 3", column1 : "3", column2 : "3" }, { name : "Rec 4", column1 : "4", column2 : "4" }, { name : "Rec 5", column1 : "5", column2 : "5" }, { name : "Rec 6", column1 : "6", column2 : "6" }, { name : "Rec 7", column1 : "7", column2 : "7" }, { name : "Rec 8", column1 : "8", column2 : "8" }, { name : "Rec 9", column1 : "9",column2 : "9" } ]; // create the data storevar firstGridStore = Ext.create('Ext.data.Store',{ model: 'DataObject', data:myData }); // Column Model shortcut array var columns = [ {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'}, {text: "column1", width: 70, sortable: true, dataIndex: 'column1'}, {text: "column2", width: 70, sortable: true, dataIndex:'column2'} ]; // declare the source Gridvar firstGrid = Ext.create('Ext.grid.Panel',{ viewConfig: { plugins:{ ptype: 'gridviewdragdrop', dragGroup: 'firstGridDDGroup',dropGroup: 'secondGridDDGroup' }, listeners: { drop: function(node, data, dropRec, dropPosition) { var dropOn = dropRec ? ' ' + dropPosition + ' ' +dropRec.get('name') : ' on empty view';Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') +dropOn); } } }, store : firstGridStore,columns : columns,stripeRows : true, title :'Grid-1', margins : '0 2 0 0' }); var secondGridStore = Ext.create('Ext.data.Store',{ model: 'DataObject' }); var secondGrid = Ext.create('Ext.grid.Panel',{ viewConfig: { plugins:{ ptype: 'gridviewdragdrop', dragGroup: 'secondGridDDGroup',dropGroup: 'firstGridDDGroup' }, listeners: { drop: function(node, data, dropRec, dropPosition) { var dropOn = dropRec ? ' ' + dropPosition + ' ' +dropRec.get('name') : ' on empty view';Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') +dropOn); } } }, store : secondGridStore,columns : columns,stripeRows : true, title :'Grid-2', margins : '0 0 0 3' }); var displayPanel = Ext.create('Ext.Panel',{ width : 650, height : 300, layout : { type: 'hbox', align: 'stretch', padding: 5 }, renderTo : 'panel', defaults : { flex : 1 }, items : [ firstGrid,secondGrid ], dockedItems:{ xtype: 'toolbar', dock:'bottom', items: ['-&gt;',{ text: '重置两个Grid',handler:function(){ firstGridStore.load Data(myData);secondGridStore.removeAll(); }}] } }); });示例截图：接下来打算研究下treePanel的节点拖拽。

EXTJS4.2资料控件之Grid行编辑绑定下拉框，并点一次触发一次事件

EXTJS4.2资料控件之Grid行编辑绑定下拉框，并点一次触发一次事件

EXTJS4.2资料控件之Grid⾏编辑绑定下拉框，并点⼀次触发⼀次事件主要代码：{header: '属性值',dataIndex: 'PropertyValueName',width: 130,editor: new boBox({typeAhead: true,triggerAction: 'all',name:'PropertyValueName',store: comboData_DynaPropertyValue,valueField: "PropertyValueName",displayField: "PropertyValueName",mode: 'remote',//localeditable: false,triggerAction: 'all',autoload: true,listeners: {"expand": function (combo, store, index) {var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;comboData_DynaPropertyValue.load({params: {PropertyId: selectedData.PropertyId, //获取当前选择⾏的字段IDstart: startDynaProperty,limit: limitDynaProperty}});}}})}详细代码：var startDynaProperty = 0;var limitDynaProperty = 30;Ext.define('DynaProperty', {extend: 'Ext.data.Model',fields: [{ name: "PropertyId", type: "int" },{ name: "PropertyName", type: "string" },{ name: "PropertyEngName", type: "string" },{ name: "PropertyValueId", type: "string" },{ name: "PropertyValueName", type: "float" }]});var store_DynaProperty = Ext.create('Ext.data.Store', {model: 'DynaProperty',//这个地⽅DynaProperty不是⼀个对象，⽽是⼀个类remoteSort: false,remoteFilter: true,pageSize: limitDynaProperty, //页容量20条数据method: 'POST',proxy: {//代理type: 'ajax',url: "/UI/HttpHandlerData/GalleryManagement/GalleryManagement.ashx?operation=SearchPicList",//请求extraParams: {start: startDynaProperty,limit: limitDynaProperty},reader: {type: 'json',root: 'Table', //根节点totalProperty: 'result' //数据总条数}},sorters: [{//排序字段。

Ext框架的Grid使用介绍

Ext框架的Grid使用介绍

Ext框架的Grid使用介绍Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。

Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

首先，一个表格应该有列定义，即定义表头ColumnModel：// 定义一个ColumnModel，表头中有四列var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);cm.defaultSortable = true;该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。

请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。

如果只想某些列举有该功能，可以设置：{header:'编号',dataIndex:'id',Sortable:true},现在就来看看这个Ext.data.Store是如何转换三种数据的。

1.二维数组：// ArrayDatavar data = [['1','male','name1','descn1'],['2','male','name1','descn2'],['3','male','name3','descn3'],['4','male','name4','descn4'],['5','male','name5','descn5']];// ArrayReadervar ds = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id',mapping: 0},{name: 'sex',mapping: 1},{name: 'name',mapping: 2},{name: 'descn',mapping: 3}])});ds.load();ds要对应两个部分：proxy和reader。

extjs4grid新增、删除、修改

extjs4grid新增、删除、修改

extjs4grid新增、删除、修改删除与修改的操作，分两块进行。

页面删除与后台删除。

因此在页面上进行删除或修改后成功后，后台只传递一个SUCCESS标记，若后台同步成功，则在页面的store中执行删除或者修改。

减少网络中的数据传输。

但是这样有一个bug，就是当用户新增了幻影数据，并且与真实数据一起修改填写提交后，后台已经写入数据库。

然后此时再删除之前添加的幻影数据，会导致id(代表一条记录的主键，本文代码中是userId)传递不到后台，导致无法查询删除。

解决方案是当后台处理成功后，前台重新加载页面，但是这样网络负担就加重了。

使之前的优势丧失[javascript]view plaincopy1.Ext.onReady(function() {2.Ext.define('User', {3.extend : 'Ext.data.Model',4.fields : [{ : 'userId',6.type : 'int',eNull : true//这样数字如果值为空则不会自动转成0,则提交时注意后台bean类中的属性int要用对象类型，否则解析出错8.}, { : 'loginName',10.type : 'string'11.}, { : 'password',13.type : 'string'14.}, { : 'remark',16.type : 'string'17.}, { : 'roleId',19.type : 'float',eNull : true21.}, { : 'rightId',23.type : 'float',eNull : true25.}, { : 'platformNo',27.type : 'string'28.}, { : 'groupId',30.type : 'float',eNull : true32.}, { : 'net',34.type : 'string'35.}, { : 'email',37.type : 'string'38.}, { : 'linkman',40.type : 'string'41.}, { : 'tel',43.type : 'string'44.}, { : 'fax',46.type : 'string'47.}, { : 'address',49.type : 'string'50.}],51.idProperty : 'userId'// 极为重要的配置。

ExtJs4之Grid详细

ExtJs4之Grid详细

ExtJs4之Grid详细ExtJs博客前奏由于这段时间事情⽐较杂乱，博客就主要以项⽬中例⼦来说明编写。

ExtJs4中的Grid⾮常强⼤，有展⽰，选中，搜索，排序，编辑，拖拽等基本功能，这篇博客我就这⼏个功能做写累述。

1.2.Grid的展⽰选中排序选中事件。

附图：代码：<script type="text/javascript">Ext.onReady(function () {var store = Ext.create('Ext.data.Store', {fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObjectName", "cataeditstatusName","cataPublishName", "cataEndDate", "holyUpdateTime", "catapushtime"],pageSize: 20, //页容量5条数据//是否在服务端排序（true的话，在客户端就不能排序）remoteSort: false,remoteFilter: true,proxy: {type: 'ajax',url: '/Tools/106.ashx?method=getAllCatalog',reader: { //这⾥的reader为数据存储组织的地⽅，下⾯的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}] type: 'json', //返回数据类型为json格式root: 'rows', //数据totalProperty: 'total' //数据总条数}},sorters: [{//排序字段。

Extjs教程 第五章 使用grid显示数据(1)

Extjs教程 第五章 使用grid显示数据(1)

使用grid显示数据（1）毫无疑问，grid是Ext中使用最广泛的组件之一。

我们需要以一种易于理解的方式为最终用户展现我们的数据，电子表格就是这种方式之一，而且相当完美——应为它做到了，并且让这一观念深入人心。

Ext 接受了该观点，并使得它更加灵活而且奇妙。

在这一章中我们会：∙使用GridPanel来在用户友好的表格中展示结构化的数据；∙从服务器或数据库加载数据显示在表格中；∙使用表格提供的事件来控制表格的功能和显示；∙在表格中采用高级的数据格式化技术；∙建立分页表格。

我们将说明如何定义表格的行和列，但是更为重要的是，我们将学习如何使表格更为美观。

我们可以添加自定义渲染的单元格，并且在其中添加图片，我们还可以根据数据值来改变显示样式。

到底什么是表格？Ext的表格和电子表格相似，包含2个重要的部分：∙行∙列在这里，我们的列是：Title, Released, Genre, 和 Price。

每一行包含像The Big Lebowski, Super Troopers之类的电影。

这些行都是我们的数据；表格中的每一行代表数据中的一条记录。

在GridPanel中显示结构化的数据：在表格中显示数据需要两个Ext组件：∙ store——像数据库一样，追踪要显示的数据；∙表格面板——提供展现store中数据的方式。

在我们开始来实现这些之前，让我们先来看看将被我们使用到的术语，因为这些术语可能会把我们搞糊涂：∙ Columns（列）：它引用整个数据列，包含显示数据有关的信息，包括列的head（列标题），在ExtJS中，这些都是Column Model（列模型）的一部分；∙ Fields（字段）：它也引用了真个数据列，但是它引用的是实际的数值。

在ExtJS里，它被在reader（Ext读取数据的组件）中，用来加载数据。

建立data store（数据容器）：我们需要做的第一件事就是建立我们的数据，它将会被放到data store之中。

DevExpressGridControl的数据绑定

DevExpressGridControl的数据绑定

DevExpressGridControl的数据绑定本⼈不才啊，折腾2个多⼩时才把数据绑定好。

现在把折腾过程记录⼀下来以帮助更多的朋友，⾃⼰也温习⼀下。

直接上代码了哈。

WPF哈xaml⽂件<dxg:GridControl Name="GridControl"><dxg:GridControl.Columns><dxg:GridColumn Header="ID" FieldName="UserID" MinWidth="100"/><dxg:GridColumn Header="⽤户名" FieldName="UserName" MinWidth="100"/><dxg:GridColumn FieldName="PwdSalt" MinWidth="100" Header="密码盐" /><dxg:GridColumn FieldName="Passwd" MinWidth="100" Header="密码" /><dxg:GridColumn FieldName="RoleID" MinWidth="100" Header="⾓⾊" /><dxg:GridColumn FieldName="Area" MinWidth="100" Header="地区" /><dxg:GridColumn FieldName="Phone" MinWidth="100" Header="电话" /><dxg:GridColumn FieldName="CreateDate" MinWidth="100" Header="创建⽇期" /><dxg:GridColumn FieldName="LastLogin" MinWidth="100" Header="最后登陆时间"/><dxg:GridColumn FieldName="LoginTimes" MinWidth="100" Header="登陆次数"/><dxg:GridColumn FieldName="Status" MinWidth="100" Header="⽤户状态"/></dxg:GridControl.Columns><dxg:GridControl.View><dxg:TableView Name="ds" /></dxg:GridControl.View></dxg:GridControl>以上注意⼀下：FieldName貌似是和数据库⾥⾯的⼤⼩写应保持⼀致的，这⾥我就折腾⽼长时间了。

利用Ext组件完成Form和Grid之间的数据传输

利用Ext组件完成Form和Grid之间的数据传输

利用Ext组件完成Form和Grid之间的数据传输3、利用Ext组件完成Form和Grid之间的数据传输这里我们来介绍一下利用JSP+ExtJs完成的Form和Grid之间的数据传输。

首先看看截图1-4从图1-4我们给大家介绍一下该功能。

首先，通过ExtJs中的组件Grid将要用的数据读取到Grid表格当中。

其次，当鼠标点击Grid表格中一行记录，就在右边将数据填充到ExtJs的另一个组件Form表单中。

最后，我们就可以在Form表单中做修改、删除、清空等操作。

下面我们就给出详细代码（1）建一个form.js文件，这个文件主要是写ExtJs代码Js代码1./*2.* title:表单复杂应用-93.* desc:该表单应用综合Form和Grid之间的数据传输应用之一4.* author:administrator5.* date:2009-10-096.*/7.8.Ext.onReady(function() {9.Ext.QuickTips.init();10.11.Ext.form.Field.prototype.msgTarget = "side";12.13.//初始化数据14.var data = [15.['1', '全兴', '酒类', '1992-09-09'],16.['2', '骄子', '烟类', '2009-08-07'],17.['3', '美好', '食品类', '2009-08-06'],18.['4', '奇多', '食品类', '2009-06-07'],19.['5', '百事可乐', '饮料类', '2009-03-24'],20.['6', '泸州老窖', '酒类', '2009-02-25']21.];22.23.var cm = new Ext.grid.ColumnModel([24.{header: '编号', dataIndex: 'id', sortable: true},//设置列可以排序25.{header: '名称', dataIndex: 'name'},26.{header: '种类', dataIndex: 'desc'},27.{header: '生产日期', dataIndex: 'date', type: 'date', renderer: Ext.util.Format.dateRen derer('Y年m月d日')}28.]);29.30.var store = new Ext.data.Store({31.proxy: new Ext.data.MemoryProxy(data),32.reader: new Ext.data.ArrayReader({},[33.{name: 'id'},34.{name: 'name'},35.{name: 'desc'},36.{name: 'date', type: 'date', dateFormat: 'Y-m-d'}37.])38.});39.store.load();40.41.var form = new Ext.form.FormPanel({42.id: 'things',43.title: 'Form和Grid之间的数据传输',belAlign: 'right',45.width: 800,yout: 'column',47.frame: 'true',48.items: [{49.columnWidth: 0.6,yout: 'fit',51.items: [{52.xtype: 'grid',53.store: store,54.cm: cm,55.autoHeight: true,56.border: false,57.title: 'Grid表格中的数据',58.sm: new Ext.grid.RowSelectionModel({59.singleSelect: true,60.listeners: {61.rowselect: function (sm, row, rec) {62.Ext.getCmp("things").getForm().loadRecord(rec);63.}64.}65.}),66.listeners: {67.render: function(g) {68.g.getSelectionModel().selectRow(0);69.},70.delay: 1071.},72.viewConfig: {73.forceFit: true74.}75.}]76.},{77.columnWidth: 0.4,78.defaultType: 'textfield',79.autoHeight: true,belWidth: 90,81.buttonAlign: 'center',82.xtype: 'fieldset',83.defaults: {width: 140},84.title: 'Grid表格中的数据对应到From表单中',85.items: [{86.fieldLabel: '编号',: 'id',88.readOnly: true89.},{90.fieldLabel: '名称',: 'name'92.},{93.fieldLabel: '种类',: 'desc'95.},{96.xtype: 'datefield',97.fieldLabel: '生产日期',: 'date',99.format: 'Y年m月d日'100.}],101.buttons: [{102.text: '修改'103.},{104.text: '删除'105.},{106.text: '清空',107.handler: function() {108.form.getForm().reset();109.}110.}]111.}],112.renderTo: 'form'113.});（2）创建form.jsp文件，这文件主要是加载ExtJs相关的核心文件和刚刚创建的form.js文件。

[ExtJS4]实战之Grid,TreeGird添加按钮列

[ExtJS4]实战之Grid,TreeGird添加按钮列

[ExtJS4]实战之Grid,TreeGird添加按钮列贴⼀个grid 的例⼦先：有这样⼀个需求：1. 给 Grid(or Tree Grid)添加⼀列，这⼀列显⽰是Button. 点击之后可以对这⼀⾏进⾏⼀些操作2. 这⼀列每⼀⾏对应的按钮不尽相同，根据每⼀⾏的数据不同，显⽰的按钮不同，对应的点击操作也不同。

针对以上需求1 , 很容易就可以解决。

Ext JS 的Grid 有提供 Ext.grid.column.ActionView xtype: actioncolumn 这样的列。

只需要在grid panel 的columns 配置⼀栏的xtype为actioncolumn；配置icon 为显⽰的按钮图；配置handler点点击的动作就可以了。

贴⼀个完整的例⼦：<!-- add by oscar999 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/><script>Ext.onReady(function(){Ext.create('Ext.data.Store', {storeId:'simpsonsStore',fields:['name', 'email', 'phone'],data:{'items':[{ 'name': 'Lisa', "email":"lisa@", "phone":"555-111-1224" },{ 'name': 'Bart', "email":"bart@", "phone":"555-222-1234" },{ 'name': 'Homer', "email":"home@", "phone":"555-222-1244" },{ 'name': 'Marge', "email":"marge@", "phone":"555-222-1254" }]},proxy: {type: 'memory',reader: {type: 'json',root: 'items'}}});Ext.create('Ext.grid.Panel', {title: 'Simpsons',store: Ext.data.StoreManager.lookup('simpsonsStore'),columns: [{ text: 'Name', dataIndex: 'name' },{ text: 'Email', dataIndex: 'email', flex: 1 },{ text: 'Phone', dataIndex: 'phone' },{ text: 'Actions', xtype: 'actioncolumn',icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")}}],height: 200,width: 400,renderTo: Ext.getBody()});});</script></head><body></body></html>如果要添加多个图标按钮也很简单{ text: 'Actions', xtype: 'actioncolumn',items:[{icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")}},{icon:'../resources/themes/images/access/grid/columns.gif',handler:function(){alert("hello")}}]}现在的问题就是，如何根据这⼀⾏其他栏的值显⽰不同的图标按钮？在早期使⽤Ext js 3 的时候，有使⽤过这种⽅法来解决这个问题：（不确定Ext js 3 是否⽀持下⾯提到的新的⽅法）旧的⽅法：把图标组成 <img src="" onclick/> 这样的字串，当成值放⼊这⼀列。

ExtJS GRID配置

ExtJS GRID配置

Ext.grid.ColumnModel用于定义Grid的列用例var colModel = new Ext.grid.ColumnModel([{header: "Ticker", width: 60, sortable: true},{header: "Company Name", width: 150, sortable: true}]);回到ColumnModel,它的构造参数是一个config组成的数组,其中config定义为{ align : String //css中的对齐方式dataIndex : String //要绑定的Store之Record字段名fixed : Boolean //如果为真列宽不能被改变header : String //头部显示的名称hidden : Boolean //隐藏本列id : String //主要用于样式选择,如果已定义此属性,那么列所在的单元格会定义class为x-grid-td-idrenderer : Function //可以使用这个构造参数格式化数据resizable : Boolean //可调节尺寸sortable : Boolean // 可排序width : Number //宽度}另外虽然未经声明,但config事实上支持editor:Ext.form.Field属性,这点会在Ext.grid.EditorGridPanel 中看到,另外为了扩展grid的表现,我们通常也需要自定义列,顺便提一个有趣的列,Ext.grid.RowNumberer,这是Ext为我们扩展好的一个简单列,它的构造很简单,也没有其它的方法和属性,Ext.grid.RowNumberer({ header : String, sortable : Boolean, width : Number})如果使用它,上例可改为var colModel = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{header: "Ticker", width: 60, sortable: true},{header: "Company Name", width: 150, sortable: true}]);属性defaultSortable : Boolean //默认可排序defaultWidth : Number //默认的宽度setConfig : Object //返回构造时的config参数方法ColumnModel( Object config )构造getCellEditor( Number colIndex, Number rowIndex ) : Object得到指定行列的编辑者getColumnById( String id ) : Object得到指定id的列对象getColumnCount() : Number得到列数getColumnHeader( Number col ) : String得到列头部文本getColumnId( Number index ) : String得到列idgetColumnTooltip( Number col ) : String得到列提示getColumnWidth( Number col ) : Number列宽getColumnsBy( Function fn, [Object scope] ) : Array通过fn找到指定的列getDataIndex( Number col ) : Number得到指定列的数据绑定对象在store中的序号getIndexById( String id ) : Number通过id找序号getRenderer( Number col ) : Function得到绘制器getTotalWidth( Boolean includeHidden ) : Number总的宽度hasListener( String eventName ) : Boolean有事件侦听者?isCellEditable( Number colIndex, Number rowIndex ) : Boolean 指定行列可编辑?isFixed() : void应该返回Boolean,充满?isHidden( Number colIndex ) : Boolean指定列隐藏?isResizable() : Boolean可重写义大小isSortable( Number col ) : Boolean可排序?setColumnHeader( Number col, String header ) : void设置指定列列头setColumnTooltip( Number col, String tooltip ) : void设置指定列提示setColumnWidth( Number col, Number width ) : void设置指定列宽度setConfig( Array config ) : void重设configsetDataIndex( Number col, Number dataIndex ) : void设置指定列的数据源setEditable( Number col, Boolean editable ) : void设置指定列是否可编辑setEditor( Number col, Object editor ) : void为指定列设置编辑器setHidden( Number colIndex, Boolean hidden ) : void设置指定列隐藏setRenderer( Number col, Function fn ) : void为指定列设置输出方法事件columnmoved : ( ColumnModel this, Number oldIndex, Number newIndex ) configchanged : ( ColumnModel this )headerchange : ( ColumnModel this, Number columnIndex, String newT ext ) hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden ) widthchange : ( ColumnModel this, Number columnIndex, Number newWidth )Ext.grid.PropertyColumnModel继承自Ext.grid.ColumnModel,专为Ext.grid.PropertyGrid而设计,构造有点不同,不过这个api文档不知道谁写的,ext2中好象没有grid了,PropertyColumnModel( Ext.grid.Grid grid, Object source )Ext.grid.GridView为GridPanel提供视图支持config{autoFill : BooleanenableRowBody : BooleanforceFit : Boolean}属性columnsT ext : String //列文本scrollOffset : Number //滚动步行sortAscText : String //正序文本sortClasses : Array //正序和倒序时头部列使用的样式,默认为["sort-asc", "sort-desc"] sortDescText : String //倒序文本方法GridView( Object config )构造focusCell( Number row, Number col ) : void指定第row行第col列得到焦点focusRow( Number row ) : void选中第row行getCell( Number row, Number col ) : HtmlElement得到指定行列的htmlelement对象getHeaderCell( Number index ) : HtmlElement得到指定列的表单头对象getRow( Number index ) : HtmlElement得到指定行的htmlelement对象getRowClass( Record record, Number index, Object rowParams, Store ds ) : void //得到指定行的样式?郁闷的是没有能在GridView.js中找到此方法的定义refresh( [Boolean headersToo] ) : void涮新显示scrollToTop() : void滚动到头部Ext.grid.GroupingView继承自Ext.grid.GridView,用于数据分组,应用于config{emptyGroupText : String //空的分组显示文本enableGroupingMenu : Boolean //允许分组菜单enableNoGroups : Boolean //允许分组/不分组显示groupT extTpl : String //这是个模板,分组项的内容依此显示,语法参见模板, hideGroupedColumn : Boolean //隐藏分组列startCollapsed : Boolean //开始时收起,默认为假}另外虽然没有在api中说明,但groupByText和showGroupsText属性也是可以在config中指定的方法GroupingView( Object config )构造getGroupId( String value ) : void取得指定值的分组id,为toggleGroup而准备的方法toggleAllGroups( [Boolean expanded] ) : void收起或展开所有的分组toggleGroup( String groupId, [Boolean expanded] ) : void展开或收起指定的分组,例grid.view.toggleGroup(grid.view.getGroupId('Horticulturalist'));会展开或收起分组字段值为'Horticulturalist'的分组例:Ext.onReady(function(){//定义数组var arr=[ ['Bill', 'Gardener'], [ 'Ben', 'Horticulturalist'],['你', 'Gardener'],['他', 'Gardener'],[ '我', 'Horticulturalist'] ];var reader = new Ext.data.ArrayReader({},//定义数组到record的映射关系[{name: 'name'},{name: 'occupation', mapping: 1}]);//生成元数据var store=new Ext.data.Store({reader:reader});store.loadData(arr);//现在配置列信息var col=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({header:'序号',width:30}),{header:'姓名',sortable: true,dataIndex:'name'},{header:'职业',sortable: true,dataIndex:'occupation'}]);//配置视图信息var view=new Ext.grid.GridView({forceFit:true,sortAscT ext :'正序', sortDescText :'倒序'});view.columnsText='列显示/隐藏';//现在我们有一个可用的grid了,别骄傲这只是第一步var grid=new Ext.grid.GridPanel({el:Ext.getBody(),height:200,width:400,store:store,cm:col,view:view});grid.render();//现在我们需要一个GroupingStorevar gstore=new Ext.data.GroupingStore({reader:reader,groupField:'name',groupOnSort:true,sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定sortInfo信息});gstore.loadData(arr);//扩展一下我们的grid,让他能分组当然会更酷一点var ggrid = new Ext.grid.GridPanel({ds: gstore,cm:col,view: new Ext.grid.GroupingView({forceFit:true,sortAscText :'正序',sortDescText :'倒序',columnsText:'列显示/隐藏',groupByText:'依本列分组',showGroupsText:'分组显示',groupTextTpl: '{text} ({[values.rs.length]} 条记录)'}),frame:true,width: 400,height: 300,collapsible: true,animCollapse: false,renderTo:Ext.getBody()});});Ext.grid.EditorGridPanel可编辑数据表格Config {clicksT oEdit : Number //点几次开始编辑,默认为2}方法EditorGridPanel()构造,应为EditorGridPanel(Object config)startEditing( Number rowIndex, Number colIndex ) : void stopEditing() : void开始停止编辑事件afteredit : ( Object e )beforeedit : ( Object e )validateedit : ( Object e )下面我们扩展一下刚才的示例应用一下EditorGridPanel//定义数组var arr=[['Bill', 'Gardener','2007-01-02',-10,true],[ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],['你', 'Gardener','2007-02-02',0,true],['他', 'Gardener','2007-01-04',13,false],[ '我', 'Horticulturalist','2007-01-05',15.2,false]];var reader = new Ext.data.ArrayReader(...{},//定义数组到record的映射关系[...{name: 'name'},...{name: 'occupation', mapping: 1},...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期...{name:'float',type:'float'},...{name:'bool',type:'bool'}]);//生成元数据var store=new Ext.data.Store(...{reader:reader});store.loadData(arr);//自定义可编辑列,从ext的示例抄的,但是却要init郁闷Ext.grid.CheckColumn = function(config)...{Ext.apply(this, config);if(!this.id)...{this.id = Ext.id();}this.renderer = this.renderer.createDelegate(this);};//重写了三个方法,捕捉mousedown修改数据Ext.grid.CheckColumn.prototype =...{init : function(grid)...{this.grid = grid;this.grid.on('render', function()...{var view = this.grid.getView();view.mainBody.on('mousedown', this.onMouseDown, this);}, this);},onMouseDown : function(e, t)...{if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{e.stopEvent();var index = this.grid.getView().findRowIndex(t);var record = this.grid.store.getAt(index);record.set(this.dataIndex, !record.data[this.dataIndex]);}},renderer : function(v, p, record)...{p.css += ' x-grid3-check-col-td';return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';}}//绑定到bool字段var checkColumn=new Ext.grid.CheckColumn(...{header: "布尔值",dataIndex: 'bool'});/**//*现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];在Ext.apply(Ext.DatePicker.prototype, {...})中加入okT ext:"确定",cancelT ext:"取消";*/var col=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(...{header:'序号',width:30}),...{header:'姓名',sortable: true,dataIndex:'name'},...{header:'职业',sortable: true,dataIndex:'occupation'},...{id:'datacol',header:'日期',sortable:true,dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示editor:new Ext.form.DateField()},...{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定义显示方式,右对齐checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的]);//配置视图信息var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});view.columnsText='列显示/隐藏';//现在我们看看可编辑的数据表格能用了吗var grid=new Ext.grid.EditorGridPanel(...{el:Ext.getBody(),height:200,width:400,store:store,cm:col,view:view});//为什么原例不需要init?checkColumn.init(grid);grid.render();function formatFloat(val)...{var bgcolor;if(val>0)...{bgcolor='#FF0000';}else if(val<0)...{bgcolor='#00FF00';}else...{bgcolor='#000000';}return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));}Ext.grid.PropertyGrid属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格, config{customEditors : Object //自定义属性编辑器source : Object //数据源}方法PropertyGrid( Object config )构造getSource() : ObjectsetSource( Object source ) : void得到和设置数据源事件beforepropertychange : ( Object source, String recordId, Mixed value, propertychange : ( Object source, String recordId, Mixed value, Mixed同样用一个简单的示例来完成PropertyGrid的学习var grid=new Ext.grid.PropertyGrid(...{el:Ext.getBody(),height:200,width:400,viewConfig : ...{forceFit:true},customEditors:...{'年龄':new Ext.grid.GridEditor(new Ext.form.NumberField()) },source:...{'姓名':'blackant','年龄':100}});grid.source['性别']='男';grid.customEditors['性别']=new Ext.grid.GridEditor(new boBox(...{ editable:false,triggerAction: 'all',store: new Ext.data.SimpleStore(...{fields: ['gender'],data : [['男'],['女']]}),displayField:'gender',forceSelection:true,mode:'local'}));grid.render();// var jsonStore = ""; // 用户存放数据// var head = ""; // 用户存放表头// var flag = true; // 标记，为第一次循环时加载head(只需加载一次)// var cfg = null;// var ds =reqGrid.getStore();// var cm =reqGrid.getColumnModel();//ds.each(function(record) {// jsonStore += "&{";// for (var i = 0; i < cm.config.length; i++) {// cfg =cm.config[i];// if(cfg.dataIndex && !cfg.hidden) {// if (flag)// head += "&{\"ename\":\"" + cfg.dataIndex + "\",\"cname\":\""// + cfg.header + "\",\"width\":\""// + (cfg.width || 20) + "\"}";// var val = record.get(cfg.dataIndex);// if(cfg.renderer) {// val= cfg.renderer(val);// }//jsonStore += "\"" + cfg.dataIndex + "\":\"" + val + "\",";// }// }// jsonStore =jsonStore.substring(0, jsonStore.length - 1);// jsonStore += "}";// flag = false;// });// // alert(jsonStore);// // Ext.Msg.alert('sd',reqGrid);// head =head.substring(1);// jsonStore =jsonStore.substring(1);。

grid++ report数据库连接使用

grid++ report数据库连接使用

Grid++ report 使用说明
1 插入报表头，点击静态框，插入文本，并调节格式；
2 插入明细网格（报表实际内容）；
3 在系统中创建ODBC数据源，点击开始-控制面板-系统和安全-管理工具-数据源（ODBC），进入，选择添加，选择iSeries Access ODBC Driver选项，完成，出现如下界面
数据库源名随便起，服务器-SQL缺省库，名字起gjjbdta(根据数据库改变)，确定完成
4 回到Grid++ report，点击报表—参数数据库查询，
创建数据库连接串，选择，下一步，
数据源名称填写刚刚建立的数据源，用户名称和密码填写数据库用户名和密码测试连接,测试成功，确定。

5 在查询SQL中写SQL语句，完成数据库连接；
6 在右侧
记录集右键，选择自动生成字段，确定，完成。

7至此，与数据库连接的报表设计基本完成。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Extjs中grid中添加连接并实现数据关联来张效果图:
下面是详细代码:
{
if(value=='0')
mystore.getAt(n).set('state',1);
else if(value=='1')
mystore.getAt(n).set('state',0);
}
</script>
<style type="text/css">
.x-grid-dirty-cell
{
background-image:none;
}
</style>
</head>
<body>
<script language="javascript"> $(document).ready(function(){
Ext.onReady(function(){
var theIndex=-1;
mystore = Ext.create('Ext.data.Store', {
fields:['ID','name','state'],
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'JSON/link.json',
reader: {
type: 'json',
root: 'user',
//totalProperty : 'total'
}
},
autoLoad: true
});
//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: mystore,
columns: [
{text: "用户ID号", dataIndex: 'ID'},
{text: "姓名",dataIndex: 'name'},
{text:"状态",dataIndex:'state'},
{text:'操作',dataIndex:'state',
renderer: function(value,metaData,record,rowIndex){
if(value==0)
{
return '<a href="#" onclick="test('+"'"+value+"','"+rowIndex+"'"+')">恢复登录</a>';
}
else(value==1)
{
return '<a href="#" onclick="test('+"'"+value+"','"+rowIndex+"'"+')">禁止登录</a>';
}
}}
],
height:400,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid示例',
renderT o: Ext.getBody(),。

相关文档
最新文档