PDA

View Full Version : repition of grids in Extjs4 mvc



raikoti sravan kumar
15 Mar 2012, 1:58 AM
Json Format :
-------------


{
"vehicleStockString": "123",
"eventDescription": "red",
"bodyStyleDesc": "AWD"
},
{
"vehicleStockString": "456",
"eventDescription": "blue",
"bodyStyleDesc": "SWD"
}


I want to display this data in two grids 1st grid should have first object data and second grid should have the 2nd object data


in below format in attachment32746

punith.mailme
15 Mar 2012, 2:32 AM
wow.. i would like to learn this. :) post your code as u complete this.

Thanks
Punith

friend
15 Mar 2012, 4:17 AM
This should be cleaned up for MVC usage:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Repitition of Grids</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.define('VehicleGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.vehiclegrid',
columns: [
{header: 'Veh. Stock', dataIndex: 'vehicleStockString', sortable: true, width: 60},
{header: 'Desc.', dataIndex: 'eventDescription', sortable: true, width: 80},
{header: 'Body Style', dataIndex: 'bodyStyleDesc', sortable: true, flex: 1},
],
margin: 5,
store: {
fields: [
{name: 'vehicleStockString', type: 'string'},
{name: 'eventDescription', type: 'string'},
{name: 'bodyStyleDesc', type: 'string'}
],
data: []
}
});

Ext.create('Ext.window.Window', {
height: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
listeners: {
afterrender: function(component, eOpts) {
//
// Use an Ajax request to retrieve your data and populate the grids in the
// 'success' method.
// Ext.Ajax.request({
// url: 'someJsonUrl',
// success: function(result, request) {
// var jsonData = Ext.JSON.decode(result.responseText);
// // populate grids here.
// }
//
// });

// Dummy up data array for demo.
var jsonData = [{
"vehicleStockString": "123",
"eventDescription": "red",
"bodyStyleDesc": "AWD"
},
{
"vehicleStockString": "456",
"eventDescription": "blue",
"bodyStyleDesc": "SWD"
}];

var grids = component.query('grid');

// note that loadData() requires an Array as its input argument, hence
// the brackets around the jsonData.
grids[0].getStore().loadData([jsonData[0]]);
grids[1].getStore().loadData([jsonData[1]]);
}
},
title: 'Repitition of Grids',
width: 400,
items: [{
xtype: 'vehiclegrid',
flex: 1
},{
xtype: 'vehiclegrid',
flex: 1
}]
}).show();
});

</script>
</head>

<body>
</body>
</html>

shrinkul
28 Mar 2012, 2:19 AM
Hi,
This code is repeating the grid but not able to put the data using extjs 4.0.7a. Please let us know if something else is required in the code which is specific to extjs 4.0.7a.

Thanks,
Shrinivas