Extjs中grid中添加连接并实现数据关联
- 格式:docx
- 大小:25.69 KB
- 文档页数:5
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中表格的特性简介表格由类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的单元格中加载超链接和按钮效果:户型图列显示的图片实际上就是一个超链接。
添加一个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 的 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 控制样式,以实现不同的分组样式和行为。
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对象缓存。
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了。
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之间的数据拖拽拖拽是一个提升用户体验的一个特色功能,虽然不是必需的,但如果添加上此功能,必然就立马变得高大上了,有木有。
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: ['->',{ text: '重置两个Grid',handler:function(){ firstGridStore.load Data(myData);secondGridStore.removeAll(); }}] } }); });示例截图:接下来打算研究下treePanel的节点拖拽。
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: [{//排序字段。
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(),。