Applying TdCls styles dynamically for textarea in extjs4.1

[arkarthickraja]

I have to apply styles for my tdcls dynamically based on conditions .if user add records using new button i need to apply this style
.dirtyTextStyle .x-grid-cell-inner {
overflow: hidden;
padding: 3px 6px;
white-space: normal;
height: 100px;
} this style.

for the exisitng records which i am getting from store i need to apply the below style.
.wrapText .x-grid-cell-inner {
white-space: normal;
}.
I have tried with getrowClass , it is not working , below is the code snippet , which i am trying to achieve this functionality can any one let me know , how to change the style for tdCls dynamically in extjs4.1


Ext.require([




'Ext.data.*',




'Ext.grid.*',




'Ext.form.*'


]);


Ext.Loader.setConfig({


enabled:

true


});




Ext.onReady(

function() {




var textAreaEdit=Ext.create(Ext.form.TextArea,{


enableKeyEvents:

true,




//cols:10,rows:3,


grow:

true,growMax:80,


autoScroll:

true


});


Ext.QuickTips.init();




var store =Ext.create('Ext.data.Store', {


storeId:

'simpsonsStore',


fields:[

'name', 'email', 'change'],


data:{

'items':[


{

'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },


{

'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },


{

'name': 'Homer', "email":"home@simpsons.com", "change":23 },


{

'name': 'Raja', "email":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor " +




"incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco" +




" laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate " +




"velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, " +




"sunt in culpa qui officia deserunt mollit anim id est laborum", "change":27 },


{

'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }


]},


proxy: {


type:

'memory',


reader: {


type:

'json',


root:

'items'


}


}


});




var



rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {


clicksToEdit: 1


});




var



rowGridPanel=Ext.create('Ext.grid.Panel', {


title:

'Simpsons',


clicksToEdit: 1,


plugins: [rowEditing],


store: Ext.data.StoreManager.lookup(

'simpsonsStore'),


dockedItems: [{


xtype:

'toolbar',


items: [{


text:

'Add',


iconCls:

'icon-add',


handler:

function(){


store.insert(0,


{

'name': 'Lisaaaaa', "email":"lisaaaaa@simpsons.com", "change":77 }


);


rowEditing.startEdit(0, 0);


}


},

'-', {


itemId:

'delete',


text:

'Delete',


iconCls:

'icon-delete',


disabled:

true,


handler:

function(){




var selection = grid.getView().getSelectionModel().getSelection()[0];




if (selection) {


store.remove(selection);


}


}


}]


}],


columns: [


{ header:

'Name', dataIndex: 'name' },


{ header:

'Email', dataIndex: 'email',editor: textAreaEdit,


tdCls:

'dirtyTextStyle', //Here i need to specify the CSS class dynamically


flex:1


},


{ header:

'Change', dataIndex: 'change'}


],


width: 800,


viewConfig:{


getRowClass:

function( record, index, rowParams, store )


{




//alert('inside getrowclass');


tdCls:

'wrapText';




var selection = rowGridPanel.getView().getSelectionModel().getSelection()[0];


}


},





renderTo: Ext.getBody()




});




});

[vietits]

Try this:


...
var rowGridPanel=Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
clicksToEdit: 1,
plugins: [rowEditing],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
store.insert(0, {
'name': 'Lisaaaaa', "email":"lisaaaaa@simpsons.com", "change":77
});
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}],
columns: [{
header: 'Name',
dataIndex: 'name'
},{
header: 'Email',
dataIndex: 'email',
editor: textAreaEdit,
//tdCls: 'dirtyTextStyle', //Here i need to specify the CSS class dynamically
flex: 1
},{
header: 'Change',
dataIndex: 'change'
}],
width: 800,
viewConfig:{
getRowClass: function( record, index, rowParams, store ){
return record.phantom ? 'dirtyTextStyle' : 'wrapText';
}
},
renderTo: Ext.getBody()
});

[arkarthickraja]

Thanks vietits, it is works like a charm :)

[arkarthickraja]

slight change in my requirement as , i need to apply the dirtyTextStyle css for the new , when i am click on Add button . for all the remaining rows i want the warpText style to be applied , can you please guide me on this ?

[vietits]

Try this:


var rowGridPanel=Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
clicksToEdit: 1,
plugins: [rowEditing],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
rowGridPanel._newRecord = true;
store.insert(0, {
'name': 'Lisaaaaa', "email":"lisaaaaa@simpsons.com", "change":77
});
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = rowGridPanel.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}],
columns: [{
header: 'Name',
dataIndex: 'name'
},{
header: 'Email',
dataIndex: 'email',
editor: textAreaEdit,
flex: 1
},{
header: 'Change',
dataIndex: 'change'
}],
width: 800,
viewConfig:{
getRowClass: function( record, index, rowParams, store ){
var rowClass = rowGridPanel._newRecord ? 'dirtyTextStyle' : 'wrapText';
delete rowGridPanel._newRecord;
return rowClass;
}
},
renderTo: Ext.getBody(),
listeners: {
edit: function(){
rowGridPanel.getView().refresh();
},
canceledit: function(){
rowGridPanel.getView().refresh();
}
}
});

[arkarthickraja]

It is not working as i am expected , is it possible to set the tdcls for text area in validateedit() or after clicking the update button to differnet css, as i am getting the padding also as part of row height.