问题描述
用extjs写了个grid,并且有checkboxselectModel,在每一行里,有一列渲染是button。在点击button时,改变其中某一列的值,并使这一列无法被选择。找了cm和sm的方法,都没有相关方法。请问该如何实现呢?使用的extjs3.2版本。 问题补充:柴秉承 写道
解决方案
/*! * suziwen1@gmail.com * http://suziwen.com */Ext.onReady(function(){ Ext.QuickTips.init(); var xg = Ext.grid; // shared reader var reader = new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}, {name: 'industry'}, {name: 'desc'} ]); //////////////////////////////////////////////////////////////////////////////////////// // Grid 2 //////////////////////////////////////////////////////////////////////////////////////// var sm = new xg.CheckboxSelectionModel({ listeners:{beforerowselect : function( _this , _rowIndex , _keepExisting , _record ) { //if()在这里加上业务逻辑,指定哪条数据不让选择中就返回FALSE if(_rowIndex == 4){ return false; }else{ return true; }} } }); var grid2 = new xg.GridPanel({ store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel({ defaults: { width: 120, sortable: true }, columns: [ sm, {id:'company',header: "Company", width: 200, dataIndex: 'company'}, {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: "Change", dataIndex: 'change'}, {header: "% Change", dataIndex: 'pctChange'}, {header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ] }), sm: sm, columnLines: true, width:600, height:300, frame:true, title:'Framed with Checkbox Selection and Horizontal Scrolling', iconCls:'icon-grid', renderTo: document.body,bbar:[{ text:'disable', handler:function(){ //这里的getCell里的4表示第4行,0表示第一列,到时根据你这个SM具体放在哪而定 var cell = grid2.getView().getCell(4, 0); var checker = Ext.fly(cell.firstChild.firstChild); checker.removeClass('x-grid3-row-checker'); checker.addClass('x-grid3-row-unselectable'); }},{ text:'enable', handler:function(){ var cell = grid2.getView().getCell(4, 0); var checker = Ext.fly(cell.firstChild.firstChild); checker.removeClass('x-grid3-row-unselectable'); checker.addClass('x-grid3-row-checker'); }}] });});// Array data for the gridsExt.grid.dummyData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'], ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'], ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'], ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'], ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'], ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'], ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'], ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'], ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'], ['McDonald's Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'], ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'], ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'], ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'], ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'], ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'], ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'], ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'], ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'], ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']];// add in some dummy descriptionsfor(var i = 0; i < Ext.grid.dummyData.length; i++){ Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');}
解决方案二:
sm添加事件 listeners:{ beforerowselect : ( SelectionModel this , Number rowIndex , Boolean keepExisting , Record record ) if(button被单击过){ return false; }else{ return true; } }}
解决方案三:
beforerowselect : ( SelectionModel this , Number rowIndex , Boolean keepExisting , Record record ) 在选中一行数据之前触发,返回false取消选中 在选中一行数据之前触发,返回false取消选中 监听器将会被以如下的参数格式调用: this : SelectionModel rowIndex : Number 将要被选择的序号 keepExisting : Boolean False if other selections will be cleared record : Record 将要被选择的记录 为sm添加事件 跟据你的逻辑 来决定是返回true还是false
解决方案四:
点击BUTTON后,表格要刷新吗?还是你自己改变STORE里的值?
解决方案五:
你的要求grid特定行不被选择是可以实现的 但是你的需求我有点不大理解 你的意思是这样吗 正常情况下可以选择行 但是当单击button后 这个行就不可以再被选择了 还是单击button的时候 行没有被选择