PDA

View Full Version : How can I get selectable text in an expander row



bclinton
16 Jul 2009, 11:05 PM
Hi,

I'm using the expander plugin from ux/RowExpander.js as seen in the first grid example on the grid-plugins.html. I am trying to make the text in the expander row selectable in Firefox.

Using the technique described in the 17th post of this thread: http://extjs.com/forum/showthread.php?t=22218&page=2 I added the following css class:



.x-selectable, .x-selectable * {
-moz-user-select: text!important;
-khtml-user-select: text!important;
}
and altered the code in the example to look like this (addition in red):



var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: [
expander,
{id:'company',header: "Company", width: 40, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
viewConfig: {
forceFit:true,
templates: {
cell: new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
'</td>'
)
}
},
columnLines: true,
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});
This works great for the text in the rows in the grid and it is now selectable, but the text in the expander content is still unselectable in Firefox.

Does anyone know how I can get the text in the expanded content to be selectable?

RomAnoX
22 Jul 2009, 7:23 AM
I'm Using row expander two and i was having this problem... what i do in FF i create this css rules



.x-grid3-row td, .x-grid3-summary-row td, .x-grid3-row-body {
-moz-user-select: text !important;
-khtml-user-select: text !important;
}


And i didn't have to change anything in my grid...

and for IE i add this inside the load of my grid



callback : function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", this.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
},
scope : grid


i hope it will help

moegal
3 Aug 2009, 8:42 AM
thanks, that worked for me too, I just changed the last item of the IE part and it works



callback : function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", this.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
},
scope : this


As in



var mygrid = new Ext.grid.GridPanel({
id:'thegrid',
store: chatstore,
loadMask: false,
stripeRows: false,
enableHdMenu: false,
callback : function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", this.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
},
scope : this,
...the rest here
});


Marty

RomAnoX
3 Aug 2009, 9:12 AM
moegal, thanks for your comment.. but i didn't know that Ext.grid.GridPanel have a callback property and a scope property directly in it's initialConfig object... what i did in my project using your example was this...



var mygrid = new Ext.grid.GridPanel({
id:'thegrid',
store: chatstore,
loadMask: false,
stripeRows: false,
enableHdMenu: false,
listeners : {
render : function(){
chatstore.load({
callback : function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", this.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
},
scope : this
});
}
}
});
I hope this would be usefull

moegal
3 Aug 2009, 9:53 AM
RomAnox,

Thanks. I just figured I would try it in the main config and it is working in both IE7 and FF2+.

Go figure.

Thanks for clearing us the post though.

Marty

JoyfulBobHome
19 Oct 2010, 11:17 AM
I tried but my rowexpander text is still unselectable (we're using ExtJs V3.3):



var flexRLSGrid = new Ext.grid.GridPanel({
id: 'flexRLSGrid',
ds: flexRLSStore,
plugins: expander,
listeners: {
render: function(){
flexRLSStore.load({
callback: function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", this.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
},
scope : this
});
}
},
...




var expander = new Ext.grid.RowExpander({
enableCaching: false,
tpl: new Ext.XTemplate(
'<table width="30%"><tr>',
'<td class=".x-grid3-row td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px;"><b>Release#:</b>&nbsp; {rlsno}&nbsp;</td><td><b>Company#:</b>&nbsp; {comno}&nbsp;</td><td><b>Acct Exec:</b>&nbsp; {actno}</td>',
'</tr><tr>',
...

JoyfulBobHome
19 Oct 2010, 11:18 AM
I tried but my rowexpander text is still unselectable (we're using ExtJs V3.3):



var flexRLSGrid = new Ext.grid.GridPanel({
id: 'flexRLSGrid',
ds: flexRLSStore,
plugins: expander,
listeners: {
render: function(){
flexRLSStore.load({
callback: function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", this.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
},
scope : this
});
}
},
...




var expander = new Ext.grid.RowExpander({
enableCaching: false,
tpl: new Ext.XTemplate(
'<table width="30%"><tr>',
'<td class=".x-grid3-row td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px;"><b>Release#:</b>&nbsp; {rlsno}&nbsp;</td><td><b>Company#:</b>&nbsp; {comno}&nbsp;</td><td><b>Acct Exec:</b>&nbsp; {actno}</td>',
'</tr><tr>',
...