PDA

View Full Version : simple code for converting a general grid to an expandable grid



Vijaya436
24 Aug 2009, 6:50 AM
Hi all,

I am getting the data into a normal grid using extjs and now I want to convert it into an expandable grid. Can any one help me out in getting the task done.. wat are the modifications to be done.. I tried it this way..

function buildResultGrid(actionObject) {
if (schoolInfoGrid !== null) {
schoolInfoGrid.destroy();
}
responseText = actionObject.response.responseText;
// Ext.log("Response text is ::"+responseText);

var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>hiiiiiiiiiiiiiiiiiiiiii:</b> ' // I want this to be there in the Expanded one

)
});

var jsonObj = Ext.util.JSON.decode(responseText);
var jsonStore = new Ext.data.JsonStore( {
root : 'schoolInfo',
fields : [ 'name', 'rank2008',schoolName],
data : jsonObj
});
schoolInfoGrid = new Ext.grid.GridPanel( {

id : 'schoolInfoGridId',
title : 'Search Results (Total :' + jsonObj.schoolInfo.length + ')',
// renderTo:'resultGridDiv',
stripeRows : true,
store : jsonStore,
viewConfig : {
forceFit : true
},
sm : new Ext.grid.RowSelectionModel( {
singleSelect : true
}),
frame : true,
id : 'schoolInfoGridId',
iconCls : 'icon-grid',
autoHeight : false,
autoWidth : false,
width : 1065,
height : 500,
autoScroll : true,
expander: expander,
collapsible: true,
animCollapse: false,
autoExpandColumn : 'name',

columns : [ {
header : "Rank 2008",
sortable : true,
defaultSortable : true,
id : 'rank2008',
dataIndex : 'rank2008'
}, {
header : "School name",
sortable : true,
id : 'schoolName',
dataIndex : 'name',
hidden : false

}]
});

Any small help wil be appreciable. Thanks in advance

mitchellsimoens
24 Aug 2009, 8:45 AM
Why do people not know how to use forums these days? There is an icon "#" in the toolbar that you should surround your code with so it's legible.

Animal
24 Aug 2009, 9:35 AM
What do you mean by "expandable" anyway? In a border layout? In a Window

Vijaya436
25 Aug 2009, 3:46 AM
By the term 'expandable' I mean GridView3 example.

Animal
25 Aug 2009, 5:46 AM
You mean with a row expander?

Read that example!

Vijaya436
25 Aug 2009, 5:50 AM
Hi..
May be yes. I am completely new to extjs. So couldnt tel u the exact term. Wat I exactly want is the row which can expand and collapse onclick of a particular symbol(may be +). I really dont know what we cal this grid as.. So I am troubling u a bit. Any way thanks for ur quick reply .

Animal
25 Aug 2009, 6:12 AM
It's in your examples directory.

And don't mess with the fonts to make your posts unreadable.

Vijaya436
25 Aug 2009, 6:58 AM
Thanks alot. Thats a great one. Thanku once again.

Vijaya436
25 Aug 2009, 9:17 AM
function buildResultGrid(actionObject) {

if (schoolInfoGrid !== null) {
schoolInfoGrid.destroy();
}
responseText = actionObject.response.responseText;
// Ext.log("Response text is ::"+responseText);
var jsonObj = Ext.util.JSON.decode(responseText);


var jsonStore = new Ext.data.JsonStore( {
root : 'schoolInfo',
fields : [ 'name', 'streetAddress'],
data : jsonObj
});

Ext.QuickTips.init();
var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template( // here I am getting the Object Expected error
' <strong>Name:</strong> {'streetAddress'} ',
' <strong>Address:</strong> {'streetAddress'}
)
});

cm: new xg.ColumnModel([
expander,
{
header : "School name",
sortable : true,
id : 'schoolName',
dataIndex : 'name',
hidden : false
}
]);


schoolInfoGrid = new Ext.grid.GridPanel( {
id : 'schoolInfoGridId',
title : 'Search Results (Total :' + jsonObj.schoolInfo.length + ')',
// renderTo:'resultGridDiv',
stripeRows : true,
store : jsonStore,
viewConfig : {
forceFit : true
},plugins: expander,
sm : new Ext.grid.RowSelectionModel( {
singleSelect : true
}),
frame:true,
collapsible: true,
animCollapse: true,
id : 'schoolInfoGridId',
iconCls : 'icon-grid',
autoHeight : false,
autoWidth : false,
width : 1065,
height : 500,
autoScroll : true,
autoExpandColumn : 'name',
columns : [ {
header : "School name",
sortable : true,
id : 'schoolName',
dataIndex : 'name',
hidden : false
},
{
header : "Street name",
sortable : true,
id : 'streetAddress',
dataIndex : 'streetAddress',
hidden : true
} ],
initEvents : function() {
var selModel = this.getSelectionModel();
selModel.on('rowselect', this.onRowSelect, this);
}, expander: expander,
collapsible: true,
animCollapse: false,
iconCls: 'icon-grid',
renderTo: document.body
});
schoolInfoGrid.render('resultGridDiv');
}



This is my code.. Can any one help me out in this matter.. Thanks in advance..

Vijaya436
25 Aug 2009, 12:28 PM
The problem is til now I was under assumption that RowExpander is included in 2.x version of extjs. So I didnt place the plug in. Now I tried tat way and its working fine.. Thanks for all who tried to reply this ..