PDA

View Full Version : Ext JS 4.2 - Using a Form to Navigate a recordset



gary.williams933
3 Jul 2013, 11:58 AM
Hello,

I'm looking to use a form to navigate thru a recordset. The closest example that I was able to find was the "Form with Grid" example that can be seen here: http://tinyurl.com/mxtspqe

All I'm really looking to do is to add "previous" and "next" buttons to the form shown in the example that would mimic the record selection on the grid (when you select a record on the grid, the data appears in the form)

Any direction is greatly appreciated.

thanks!

slemmon
4 Jul 2013, 3:55 PM
You should be able to use that example for the most part. To navigate through the records and select them you can use the selectionModel's selectNext and selectPrevious to great effect:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.RowModel-method-selectNext
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.RowModel-method-selectPrevious

You'll just need to get a reference to the selection model which you can do by referencing your grid and doing grid.getSelectionModel()
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-method-getSelectionModel

gary.williams933
4 Jul 2013, 4:09 PM
Thanks for the info. I'm going to give it a shot tomorrow

gary.williams933
5 Jul 2013, 8:37 AM
Ok, here's a newbie question for you. How would I render the example given here:

http://tinyurl.com/mxtspqe

as a standalone page (without "Kitchen Sink" panels) so that I can work with the core .js file?

thanks in advance!

gary.williams933
6 Jul 2013, 8:12 AM
So I took a first crack at separating out the code shown in Kitchen sink to standalone code but I'm getting the following error:

TypeError: e.dockedItems is undefined

Any thoughts as to why I'm getting this error? What follows is the current version of the code:

Thanks




Ext.require([
'Ext.grid.*',
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.form.Panel'
]);

Ext.onReady(function(){


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});
// Array data for the grids
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

var win2 = Ext.create('Ext.window.Window', {

xtype: 'basic-window',
title: 'Company data',
bodyPadding: 5,

initComponent: function(){

Ext.apply(this, {
width: 880,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},

items: [{
columnWidth: 0.65,
xtype: 'gridpanel',
store: new Ext.data.Store({
model: Company,
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: myData
}),
height: 400,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
width: 75,
sortable: true,
dataIndex: 'price'
}, {
text: 'Change',
width: 80,
sortable: true,
renderer: this.changeRenderer,
dataIndex: 'change'
}, {
text: '% Change',
width: 100,
sortable: true,
renderer: this.pctChangeRenderer,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 115,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}, {
text: 'Rating',
width: 60,
sortable: true,
renderer: this.renderRating,
dataIndex: 'rating'
}],
listeners: {
scope: this,
selectionchange: this.onSelectionChange
}
}, {
columnWidth: 0.35,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Company details',
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'company'
},{
fieldLabel: 'Price',
name: 'price'
},{
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
}, {
xtype: 'radiogroup',
fieldLabel: 'Rating',
columns: 3,
defaults: {
name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
},
items: [{
inputValue: '0',
boxLabel: 'A'
}, {
inputValue: '1',
boxLabel: 'B'
}, {
inputValue: '2',
boxLabel: 'C'
}]
}]
}]
});
this.callParent();

},

changeRenderer: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},

pctChangeRenderer: function(val){
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},

renderRating: function(val){
switch (val) {
case 0:
return 'A';
case 1:
return 'B';
case 2:
return 'C';
}
},

onSelectionChange: function(model, records) {
var rec = records[0];
if (rec) {
this.getForm().loadRecord(rec);
}
}

});
win2.show();
});

gary.williams933
7 Jul 2013, 12:10 PM
So I was able to get the "Kitchen Sink" version of the "Form with Grid" (http://tinyurl.com/mxtspqe) example to work as a standalone . Special thanks to this thread on finding the resolution:

http://stackoverflow.com/questions/11536141/me-dockeditems-error-in-extjs

Now its off to get the navigation to work.

Here is the code if anyone is interested:



Ext.require([
'Ext.grid.*',
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.form.Panel'
]);

Ext.onReady(function(){


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});
// Array data for the grids
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

var form = Ext.create('Ext.form.Panel', {
columnWidth: 0.35,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Company details',
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'company'
},{
fieldLabel: 'Price',
name: 'price'
},{
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
}, {
xtype: 'radiogroup',
fieldLabel: 'Rating',
columns: 3,
defaults: {
name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
},
items: [{
inputValue: '0',
boxLabel: 'A'
}, {
inputValue: '1',
boxLabel: 'B'
}, {
inputValue: '2',
boxLabel: 'C'
}]
}]
});

var win2 = Ext.create('Ext.window.Window', {

xtype: 'basic-window',
title: 'Company data',
bodyPadding: 5,

width: 880,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},

items: [{
columnWidth: 0.65,
xtype: 'gridpanel',
store: new Ext.data.Store({
model: Company,
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: myData
}),
height: 400,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
width: 75,
sortable: true,
dataIndex: 'price'
}, {
text: 'Change',
width: 80,
sortable: true,

renderer: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
dataIndex: 'change'
}, {
text: '% Change',
width: 100,
sortable: true,
renderer: function(val){
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 115,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}, {
text: 'Rating',
width: 60,
sortable: true,
renderer: function(val){
switch (val) {
case 0:
return 'A';
case 1:
return 'B';
case 2:
return 'C';
}
},
dataIndex: 'rating'
}],
listeners: {
selectionchange: function(model, records) {
var rec = records[0];
if (rec) {
form.loadRecord(rec);
}
}
}
},form]



});
win2.show();
});

slemmon
8 Jul 2013, 2:28 PM
And thanks for sharing your code. No doubt your efforts will help someone else in the future.