Results 1 to 1 of 1

Thread: Modifing the portal sample application

  1. #1

    Default Modifing the portal sample application

    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

    Code:
    function EmbededReport(PatternCode){
    Code:
    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

    Code:
    xtype:'portal',
    Code:
     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
    Attached Images Attached Images
    Last edited by lokhandeamol@gmail.com; 9 Nov 2009 at 4:57 AM. Reason: for formatting

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •