PDA

View Full Version : textarea in grid



arpho
24 Jul 2012, 12:39 AM
Hi I am new in extjs,I need a grid with multiline cell to show a column of type text in my db, as far in that column there is one only line of text, all work fine, when the field is multiline the row in the grid is empty; this is my model


Ext.define('companiesModel', {
extend: 'Ext.data.Model',
fields: [
{name:'id',type:'int'},
{name:'line',type:'string'},
{name:'last_update',type:'date'},
{name:'country',type:'string'},
{name:'name',type:'string'},
{name:'note',type:'string'}
]
});


this is my grid:


var grid = Ext.create('Ext.grid.Panel', {
height: 450,
width: 1300,
title: 'Companies List',
id:'grid',
store: store,

columns: [
{dataIndex:'id',
flex:1.1,
text:"id",
hidden:true
},
{
dataIndex:'name',
flex: 1.5,
text:'Name'
},
{
dataIndex: 'country',
width: 50,
text: 'country'
}, {
dataIndex: 'line',
flex: 1,
text: 'Line'
}, {
dataIndex: 'last_update',
width:150,
text: 'Last Update'
},
{
width:200,
text:"Note",
dataIndex:'note',
field: {
xtype: 'textarea'
},
}
//'codice mmas', 'ragione sociale', 'indirizzo', 'cap','comune','provincia','telefono','cf/piva'
],

// toolbar
tbar:
{
items:
[
{
xtype: 'label',
x:100,
id:'numRow',
text: 'Companies:'
}
]
},

listeners:
{
itemclick: function(view, record, item, index, e, options)
{
menuContext = new Ext.menu.Menu({
items:
[
{
text: 'Shows Notes',
handler:function()
{
var storeCompaniesNotes= Ext.create('Ext.data.Store',
{
pageSize:25,
model:'notesModel',
autoLoad: false,
root: 'results',
totalProperty:'total',

listeners:
{
load : function(store)
{
console.log("loaded notes");
console.debug(storeCompaniesNotes);
// Ext.getCmp('numRow').setText("Companyes: "+store.getCount());
}
},
proxy:
{
idProperty: 'id',
type: 'direct',
directFn: QueryDatabase.getCompaniesNotes,

}
});//eof storeCompanies
++index;

storeCompaniesNotes.load(
{
id:record.data.id
});
console.log("aggiungo tab");
var notesGrid=new Ext.grid.GridPanel
({

height: 155,
width: 1440,
title: 'Notes',
store: storeCompaniesNotes,
columns: [
{dataIndex:'id',
flex:1.1,
text:"id",
hidden:true
},
{
dataIndex:'date',
flex: 1.5,
text:'Date'
},
{
dataIndex: 'note',
flex: 2,
text: 'Note'
},
//'codice mmas', 'ragione sociale', 'indirizzo', 'cap','comune','provincia','telefono','cf/piva'
],

});
notesGrid.title="Notes for "+record.data.name;
console.debug(notesGrid);
console.log("nota");
console.debug(record.data);
var tab=tabs.add(
//notesGrid,
{
title: "Notes for "+record.data.name,
closable: true,
id:'tab'+index,
items:notesGrid,
//html : 'A simple tab'+index,

});
tabs.setActiveTab(tab);
//tabs.doLayout();

/*var w = new Ext.Window(
{
height: 300, width: 450,
title: " Notes for "+record.data.name,
id:'form',
// html: '<h1>Oh</h1><p>HI THERE EVERYONE</p>',
items:
[

//new Ext.form.TextArea({id:'nota',value:'testvalue',width:44,height:30}),
notesGrid




],
buttons : [
{
text: 'Close',
handler : function(btn)
{
//Ext.Msg.alert('dblclick','hai premuto ok');
w.close();
}
}
]
}
);//eof w*/

//w.show();
}
}
]
});
menuContext.showAt(e.xy);

}
},


//renderTo: Ext.getBody()
});





I am not able to find what I am doing wrong, I do not think it should be complicateto do it, thanks in advance.

scottmartin
24 Jul 2012, 10:05 AM
You may want to have a look at this UX:
http://skirtlesden.com/ux/component-column

Regards,
Scott.