PDA

View Full Version : Modifing the portal sample application



lokhandeamol@gmail.com
9 Nov 2009, 4:32 AM
Hi All,

Currently I am modifying the "portal" sample application from ExtJs 3.0. There I am in process of modifying the call to the samplegrid. In this example there is a call for "SampleGrid" which contains the fixed column with fix data. Now I am trying to modify the "SampleGrid" which dynaimically read the data from the server on fly irrespective of any number of column. Following is code that I have found on ExtJS site that i am using for this purpose


function EmbededReport(PatternCode){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://localhost/Test.aspx?code=V9Sw2-QuickLinks-r-MyLinks'}),
reader: new Ext.data.DynamicJsonReader({root: 'reportData'})
});

var grid;

ds.load();
ds.on('load', function() {
ds.recordType = ds.reader.recordType;
ds.fields = ds.recordType.prototype.fields;
// Create the grid
grid = new Ext.grid.GridPanel({
store: ds,
cm: new Ext.grid.DynamicColumnModel(ds),
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true,
height:150,
//width:350,
header:false,
hideHeaders:true,
hideLabel:true
});


//grid.render('center1');
});
return grid;
}
//Ext.extend(EmbededReport, Ext.grid.GridPanel);

Ext.grid.DynamicColumnModel = function(store){
var cols = [];
var recordType = store.recordType;
var fields = recordType.prototype.fields;
for (var i = 0; i < fields.keys.length; i++)
{
var fieldName = fields.keys[i];
var field = recordType.getField(fieldName);
cols[i] = {header: field.name, dataIndex: field.name, width:300};
}
Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});

Ext.data.DynamicJsonReader = function(config){
Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};

Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
getRecordType : function(data) {
var i = 0, arr = [];
for (var name in data[0]) { arr[i++] = name; } // is there a built-in to do this?

this.recordType = Ext.data.Record.create(arr);
return this.recordType;
},

readRecords : function(o){ // this is just the same as base class, with call to getRecordType injected
this.jsonData = o;
var s = this.meta;
var sid = s.id;

var totalRecords = 0;
if(s.totalProperty){
var v = parseInt(eval("o." + s.totalProperty), 10);
if(!isNaN(v)){
totalRecords = v;
}
}
var root = s.root ? eval("o." + s.root) : o;

var recordType = this.getRecordType(root);
var fields = recordType.prototype.fields;

var records = [];
for(var i = 0; i < root.length; i++){
var n = root[i];
var values = {};
var id = (n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
for(var j = 0, jlen = fields.length; j < jlen; j++){
var f = fields.items[j];
var map = f.mapping || f.name;
var v = n[map] !== undefined ? n[map] : f.defaultValue;
v = f.convert(v);
values[f.name] = v;
}
var record = new recordType(values, id);
record.json = n;
records[records.length] = record;
}
return {
records : records,
totalRecords : totalRecords || records.length
};
}
});


When I am tring to return Grid object from "EmbededReport" it displays nothing since onload event gets fired after return operation.

When I am tring to render it as part of item i.e


xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Weekly Top 5',
layout:'fit',
tools: tools,
id:'center1',
//items: new SampleGrid([0, 2, 3])
items: EmbededReport('Test.aspx')
//url: 'http://www.google.com'
},{
title: 'My Preference',
tools: tools,
items: getReport('Test.aspx')
}]
}

use "grid.render('center1');" then it displays the grid as per the attachement.

Can anbody let me know how to return the grid object with data in it or proper allignment by removing the space between header and first row?

Regards
Amol Lokhande