Ext使用笔记（不定期更新 2010-2-09）

1.获得store里的值

最近在做EXT开发～今天刚好做的是两个grid数据之间的拖拽，因为要报讯grid2的数据。所以要获得grid2的store,方法如下：

emp_obj=grid2.getStore(); var len=emp_obj.data.getCount();//emp_obj.data.length也是可以的 var rec; for(var i=0;i<len;i++){ rec= emp_obj.getAt(i); alert(rec.get("memberID")) }

想要知道更多store的信息可以看Ext.Store 的使用

 

2.解决Grid组件无法初始选中问题

网上GG一下搜来解决方案：

使用带复选框grid组件的时候发现了一个奇怪的问题，第一次载入这个grid组件时就给这个grid组件初始化数据并选中其中的某一项，但始终无法选 中，经单步调试发现，选中行的方法已被执行了，只是在所有的东西都执行完后，grid又刷新了一下，导致原先选中的项丢失。
　　代码如下：

Ext.onReady(function(){ var data = [ ['table1','column1','remark1'], ['table2','column2','remark2'] ]; var store = new Ext.data.Store({ proxy : new Ext.data.MemoryProxy(data), reader : new Ext.data.ArrayReader({},[ {name : 'tableName'}, {name : 'columnName'}, {name : 'remark'} ]) }); var databindsm = new Ext.grid.CheckboxSelectionModel({handleMouseDown : Ext.emptyFn,singleSelect : true}); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), databindsm, {header : '表名',dataIndex : 'tableName',width : 145}, {header : '字段名',dataIndex : 'columnName',width : 145}, {header : '备注',dataIndex : 'remark',width : 145} ]); var grid = new Ext.grid.GridPanel({ width : 570, height : 240, loadMark : true, store : store, cm : cm, sm : databindsm }); var viewport = new Ext.Viewport({ height : 240, width : 570, items : [grid] }); store.load(data); alert("aa"); grid.getSelectionModel().selectRow(1,true); alert("bb"); });

　经查发现，原来是ext的mvc模式在作怪，源码中有如下方法：

// private afterRender : function(){ Ext.grid.GridPanel.superclass.afterRender.call(this); this.view.layout(); if(this.deferRowRender){ this.view.afterRender.defer(10, this.view); }else{ this.view.afterRender(); } this.viewReady = true; },  

 

　在render数据后并没有显示页面，而是延迟渲染view，我们在view后再去选中，虽然设置了选中，但被延迟的渲染覆盖掉了，所以导致逻辑正确而显示不正确的结果。
　　解决办法：
　　1、静态store：在grid中加上一个配置项deferRowRender:false（不执行默认的render代码）；
　　2、动态store：使用store的load事件，在装载后进行选中

      grid.store.on("load",function(){ grid.getSelectionModel().selectRow(1,true)

 

 

3.ExtJS Grid 选择文字以便复制

 

原文:http://extjs.com/learn/Ext_FAQ_Grid#How_to_select_text_in_the_grid_.28with_the_mouse.29_so_that_it_can_be_copied_to_the_clipboard

1.相关帖子:http://extjs.com/forum/showthread.php?p=154426#post154426

 

首先添加CSS:

.x-selectable, .x-selectable * { -moz-user-select: text!important; -khtml-user-select: text!important; }

给gridpanel设置

var grid = new Ext.grid.GridPanel({ viewConfig: { templates: { cell: new Ext.Template( '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} <span style="color: rgb(128, 128, 0);" mce_style="color: #808000;">x-selectable</span> {css}" style="{style}" tabIndex="0" {cellAttr}>', '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', '</td>' ) } }, ... });

 

把它设置为GRID的默认属性，在ext-all.js最后加上这段代码

if (!Ext.grid.GridView.prototype.templates) { Ext.grid.GridView.prototype.templates = {}; } Ext.grid.GridView.prototype.templates.cell = new Ext.Template( '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" mce_style="{style}" tabIndex="0" {cellAttr}>', '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', '</td>' );

 

4.如果你也想让表头文字可选,则可以相应的修改hcell模板;

5.如果你使用的是分组Grid,则需要把以上的模板定义放入到GroupingView的配置中去,而不是上文的viewConfig

 

看下源码:

//GridView 288行 if(!ts.cell){ ts.cell = new Ext.Template( '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" mce_style="{style}" tabIndex="0" {cellAttr}>', '<div class="x-grid3-cell-inner x-grid3-col-{id}" <span style="color: rgb(128, 128, 0);" mce_style="color: #808000;">unselectable="on"</span> {attr}>{value}</div>', '</td>' ); }

可知,以上的修改就是把unselectable去掉,并且在td的class里面多加了我们的x-selectable

 

2.进一步的,如果需要只针对某些列可选:

    2.1在该列的renderer(value,meta)里面,添加一句meta.selectable=true

    2.2再编辑下cell的模板,在里面判断{selectable?'someCssClass':''}