PDA

View Full Version : Displaying two EXTJS grids in JSP page



rgurijala
23 May 2012, 10:04 AM
Hi,

I am trying to display two extjs grids in a JSP page. However, the grids are not getting populated as per the requirement. The first grid should consist of only 4 rows(as per the data extracted from DB) and the second grid should contain 4 rows. But, the first grid has 8 rows, with 4 rows filled with data from DB and the other 4 rows empty. The second grid also has 8 rows, the first 4 rows being empty and the last 4 rows filled up with data. I have tried changing the grid names, array name for both the grids, without much luck. Can anyone help me pointing in the right direction, why the data is populated 35557

Also, please find below the code I have used to display the above grids. I am using Struts2.0, extjs4.0.7 and mysql.

function1();

function function1()
{

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '<%=contextRoot%>/ext-4.0.7-gpl/examples/ux/');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.toolbar.Paging',
'Ext.ux.SlidingPager'
]);

Ext.onReady(function() {

var arrayData= new Array();



// register model
Ext.define('pname', {
extend: 'Ext.data.Model',
idProperty: 'pname',
fields: [
{name: 'pname'},
{name: 'pid'},
{name: 'desc'},

]
});

// create the data store
var store = new Ext.data.SimpleStore({
model: 'pname',
data : arrayData


});


// create the Grid
var grid = Ext.createWidget('gridpanel', {


columns: [
{
text : 'Product Name',
width : 200,
sortable : true,
dataIndex: 'pname'
},
{
text : 'Product Id',
width : 150,
sortable : true,
dataIndex: 'pid'
},
{
text : 'Description',
width : 200,
sortable : true,
dataIndex: 'desc'

},
{
xtype: 'actioncolumn',
header:'Action',
width: 63,
items: [{
icon : '<%=contextRoot%>/images/delete2.jpg', // Use a URL in the icon config
tooltip: 'Delete Product ?',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Delete " + rec.get('pname'));
}
}]
}
],
id : 'File_View_Panel',
// title : 'File View',
autoHeight : true,
autoWidth : true,
// store : store,
// view : gridView,
// colModel : cm,
// selModel : selModel
stripeRows: true,
frame:true,
resizable: {
handles: 's'
},
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
})
});




var myStore = Ext.getCmp('File_View_Panel').getStore();


<s:iterator value="prodlist" status="j">

var index = "<s:property value="j.count"/>";



var iproductName = "<s:property value="productProfileName"/>";

var iproductProfileID = "<s:property value="productProfileID"/>";
var iproductProfileDescription = "<s:property value="productProfileDescription" />";






var newRecord = new pname({pname: iproductName, pid: iproductProfileID,desc: iproductProfileDescription});


index++;

myStore.add(newRecord);

</s:iterator>



grid.render('reg-product-profiles');
store.load();


});

}


function2();

function function2()
{

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '<%=contextRoot%>/ext-4.0.7-gpl/examples/ux/');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.toolbar.Paging',
'Ext.ux.SlidingPager'
]);

Ext.onReady(function() {

var arrayData1= new Array();



// register model
Ext.define('uname', {
extend: 'Ext.data.Model',
idProperty: 'uname',
fields: [
{name: 'uname'},
{name: 'uid'},
{name: 'tr'},

]
});

// create the data store
var store1 = new Ext.data.SimpleStore({
model: 'uname',
data : arrayData1,


});


// create the Grid
var grid1 = Ext.createWidget('gridpanel', {


columns: [
{
text : 'User Name',
width : 200,
sortable : true,
dataIndex: 'uname'
},
{
text : 'User Id',
width : 150,
sortable : true,
dataIndex: 'uid'
},
{
text : 'Time Registered',
width : 200,
sortable : true,
dataIndex: 'tr'
},
{
xtype: 'actioncolumn',
header:'Action',
width: 63,
items: [{
icon : '<%=contextRoot%>/images/delete2.jpg', // Use a URL in the icon config
tooltip: 'Delete Product ?',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Delete " + rec.get('pname'));
}
}]
}
],
id : 'File_View_Panel1',
// title : 'File View',
autoHeight : true,
autoWidth : true,
// store : store,
// view : gridView,
// colModel : cm,
// selModel : selModel
stripeRows: true,
frame:true,
resizable: {
handles: 't'
},
bbar1: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store1,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
})
});




var myStore1 = Ext.getCmp('File_View_Panel1').getStore();


<s:iterator value="appllist1" status="f">

var index1 = "<s:property value="f.count"/>";



var iuserName = "<s:property value="appUsrNm"/>";

var iuserID = "<s:property value="appUsrId"/>";

var itimeRegistered = "<s:property value="loggedInTs" />";






var newRecord1 = new uname({uname: iuserName, uid: iuserID,tr: itimeRegistered});


index1++;

myStore1.add(newRecord1);

</s:iterator>



grid1.render('reg-user-prof');
store1.load();


});

}


Thanks,
Ram

scottmartin
24 May 2012, 1:14 PM
Please format your code when posting.

Have you checked your arrays to see if they are populating as expected? No corruption?
Where is your data coming from? same place for both?

Why not create 2 store and load each store and assign them to the grid?

Scott.