PDA

View Full Version : Textbox on a Grid



Sadd
3 Aug 2012, 5:41 AM
I want to know how to make a textbox column in a grid.

Thanks,
- Sadd

Romick
3 Aug 2012, 6:18 AM
What exactly do you want? Editable field on the grid or cell tooltip.

Sadd
3 Aug 2012, 6:23 AM
Exactly what i want is view a column like it displays when you click in the column with a editor with xtype: 'textbox'.

sword-it
3 Aug 2012, 6:35 AM
Hi,

You can try following code:





Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});


Click on first colum then it will change into a textfield

In Extjs 4.x use these two propeties





selType: 'cellmodel', // you can use rowmodelplugins: [ Ext.create('Ext.grid.plugin.CellEditing', { // Ext.grid.plugin.RowEditing
clicksToEdit: 1 }) ]


For make any column textfield or another ext component use editor config for perticular columns




{header: 'Name', dataIndex: 'name', editor: 'textfield'}


for more details see this link: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing

Sadd
3 Aug 2012, 6:42 AM
Yes this works fine, but i'm looking to have the view of editor by deafult not display the textfield when you click on an element in the column with editor, just have a textfield column which looks equals to the editor view and when you click on it this doesn't change to a textfield.

scottmartin
3 Aug 2012, 6:58 AM
You can have a look at Component Column where items are visible by default:
http://skirtlesden.com/ux/component-column

Scott.

Sadd
3 Aug 2012, 7:31 AM
That looks like what i want. Thanks Scott :)