View Full Version : Grid Panel -> Form Display

27 Sep 2010, 5:19 AM
ExtJS newbie here having a headsplitting time trying to discover the answer to what appears to be a rather simple question.

I'm using JsonStore to populate a grid with a summary of all the data required. The rest of the fields are to be populated into a tabbed form (in another ViewPort area) with the values changing when the user selects a different row in the grid. I can get this to work using template updates, the trouble with that is that it uses HTML for the field creation and is going to take ages formatting and CSSing each field, plus I won't get field validation working. I thing what I need is a method of doing this using xtype fields.

Would anyone like to put me out of my misery - it's either that or the 'puter will be on the wrong end of a 2 pound hammer :-)

28 Sep 2010, 1:37 AM
Well the weight of the hammer is increasing, it's 5 pounds now!

I think I've constructed everything OK from butchering serveral examples and have come up with the following code.
I just can't get the glue to work - the RowSelectionModel seems to be selecting the row OK but the tabbed form in viewport's EAST is not updating. Anyone got any ideas please?

Ext.onReady(function() {


//turn on validation errors
Ext.form.Field.prototype.msgTartget = 'side';

var bd = Ext.getBody();

// create the Data Store
var ds = new Ext.data.JsonStore({url: 'grid-data.php',
,{name:'event_start_date', type:'date', dateFormat:'Y-m-d'}
,{name:'event_start_time', type:'time'}
,{name:'event_end_date', type:'date', dateFormat:'Y-m-d'}
,{name:'event_end_time', type:'time'}
}); //eo store
//load data from the php url

//create the default column model
var colModel = new Ext.grid.ColumnModel([
{id:'ID',header:"ID",width:1, sortable:true,dataIndex:'eventid'}
,{header:"Event Name",width:10,sortable:true,dataIndex:'eventname'}
,{header:"Event Type",width:10,sortable:true,dataIndex:'event_type'}
,{header:"Start Date",width:6,sortable:true,renderer:Ext.util.Format.dateRenderer('d M Y'),dataIndex:'event_start_date'}
,{header:"Start Time",width:5,sortable:false,dataIndex:'event_start_time'}
,{header:"End Date",width:6, sortable:true, xtype:'datecolumn', format: 'M d, Y',dataIndex:'event_end_date'}
,{header:"End Time",width:5,sortable:false,dataIndex:'event_end_time'}

var grid = new Ext.grid.GridPanel({
,viewConfig: {forceFit: true}
,split: true
,region: 'center'
,store: ds
,colModel: colModel
,sm: new Ext.grid.RowSelectionModel({singleSelect: true})
,listeners: {
viewready: function(g) {

Ext.BLANK_IMAGE_URL = './s.gif';

handleAction = function(action){
Ext.example.msg('<b>Action</b>', 'You clicked "'+action+'"');

//toolbar definitions for the center panel
tbar = new Ext.Toolbar({
enableOverflow: true,
items: [{
,text: 'Print'
,iconCls: 'add16'
,handler: handleAction.createCallback('Print')
,menu: [
{text: 'Event Summary', handler: handleAction.createCallback('Event Summary')}
,{text: 'Detailed Event', handler:handleAction.createCallback('Detailed Event')}
,text: 'Test1'
,iconCls: 'add16'
,handler: handleAction.createCallback('Test1')
,menu: [{text: 'Test1', handler: handleAction.createCallback('Test1')}]
text: 'Test2'
,iconCls: 'add16'
,handler: handleAction.createCallback('Test2')

var viewport = new Ext.Viewport({
region: 'west'
,layout: 'border'
,border: false
,minimizable: true
,items: [
},{region: 'center'
,id: 'westnorth'
,title: 'Bits and Bobs'
//,split: true
,height: 150
//,split: true
,html:'<div id="tree"> area for DIV ID=TREE </div>'
,minimizable: false
,collapsible: false
,title: 'Event Details'
,anchor:'100% 100%'
// ,html: 'Please select an event from the grid to see additional details.'}
{title:'General Information',id: 'generalPanel'
{ xtype: 'textfield', fieldLabel: 'Event ID', name: 'eventID', anchor: '50%', disabled: 'true'}
,{ xtype: 'textfield', fieldLabel: 'Event Name', name: 'eventName', anchor: '95%'}
,{ xtype: 'textfield', fieldLabel: 'Customer', name: 'customer', anchor: '95%'}
,{ xtype: 'datefield', fieldLabel: 'Start Date', name: 'startDate', anchor: '95%',format: 'd M Y' }
,{ xtype: 'datefield', fieldLabel: 'End Date', name: 'endDate', anchor: '95%',format: 'd M Y' }
,{title:'Staff Requirement',id: 'staffPanel'}
,{title:'Transport Requirement',id: 'transportPanel',layout:'form'}
,{title:'Equipment',id: 'equipmentPanel'}
,{title:'Accomodation',id: 'accomodationPanel'}
,{title:'Catering',id: 'cateringPanel'}
,{title:'Marketing',id: 'marketingPanel'}
,{title:'Finance',id: 'financePanel'}
{region: 'north',items:[tbar]}
// ,{region:'south',xtype: 'calendarpanel'}


// eof