PDA

View Full Version : Setting Text Area height to 5 rows by default inside row edit grid



arkarthickraja
4 Sep 2012, 10:20 AM
I am using row edit grid with text area.
If user add record using add button , a new row with text area 5 rows height, should be created . i am able to get the text area with 5 rows only if i add the padding :50px,6px.On click on add button ,is it any way i could increase the text area row height with out using padding property .
.dirtyTextStyle .x-grid-cell-inner {
overflow: hidden;
padding: 50px 6px;
white-space: normal;
}

.wrapText .x-grid-cell-inner {
white-space: normal;}
Kindly check the below code i have tried:




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,





flex:1


},


{ header:

'Change', dataIndex: 'change'}


],


width: 800,

viewConfig:{


getRowClass: function( record, index, rowParams, store ){
return record.phantom ? 'dirtyTextStyle' : 'wrapText';
}


},




renderTo: Ext.getBody()


});


});

jay@moduscreate.com
4 Sep 2012, 10:53 AM
In all seriousness. How do you expect anyone to assist with code posted like that?

arkarthickraja
4 Sep 2012, 6:15 PM
Alright, my issue is, is it possible to make the text area height to 5 rows without using css padding property , inside the row editing grid.