PDA

View Full Version : Stupid Easy NEWB Question : Grid View Data to Panel View.



jwilson141
19 Jun 2015, 4:25 PM
Okay, So, I'm a newb, got 3 js files, The first is a car grid-view:


Ext.define('E.view.AllCars', { extend: 'Ext.grid.Panel',

xtype: 'car-grid',

title: 'All Cars',

store: { type: 'CarStore' },

columns: [
{ text: 'Make', dataIndex: 'make', width: 155},
{ text: 'Model', dataIndex: 'model', width: 70},
{ text: 'Year', dataIndex: 'year', width: 70},
{ text: 'Mileage, dataIndex: 'mileage', width: 155} ],

viewConfig: { copy: false,
plugins: { ptype: 'gridviewdragdrop', dragText: 'Drag and drop to reorganize' },

listeners: { drop: function(node, data, dropRec, dropPosition){ var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view'; } } },

singleSelect: true
});

One is the controller for that :



Ext.define('E.controller.AllCars', { extend: 'Ext.app.Controller',
views: ['E.view.AllCars'],
init: function () { this.control({ }); }

and then the last is to display more details about the cars once they are selected :


Ext.define('E.view.Car', { extend: 'Ext.form.Car',
xtype: 'car-form',
title: 'Selected Car',
items: [ {
xtype: 'displayfield',
fieldLabel: 'Make',
name: 'make',
itemid: 'make' },

{ xtype: 'displayfield',
fieldLabel: 'Model',
name: 'model',
itemid: 'model' },

{ xtype: 'displayfield',
fieldLabel: 'Year',
name: 'year',
publishes: ['year'] },

{ xtype: 'displayfield', ]
fieldLabel: 'Color',
name: 'color',
publishes: ['color'] },

{ xtype: 'displayfield',
fieldLabel: 'Transmission',
name: 'transmission',
itemid: 'transmission' },

{ xtype: 'displayfield',
fieldLabel: 'Details',
name: 'details',
itemid: 'details'
} ]});

I have all the data populating correctly to the grid view, but once I click on the gridview, I want this other container to fill in all the appropriate information about said car. How do I accomplish that? Code examples VERY welcome.

joel.watson
20 Jun 2015, 8:40 AM
Hi--

In your controller, you can create a listener for the "select (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-event-select)" event on your grid. This event passes along the "record" which is bound to the selected row to your handler. In your handler, then, you can retrieve a reference to your form and call loadRecord (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-method-loadRecord)(), passing the record received by the handler. This will automatically populate the form with data where the keys within the data record match the keys (names) of the fields in the form.

I hope that helps!
Thanks
Joel