Results 1 to 2 of 2

Thread: MetaGrid and the GroupHeaderPlugin ( 1.3) ; How to get it working together

  1. #1

    Default

    Hi , i beeen trying for a day now to manage to dynamically build up the header and columns based on the properties of the item where showing the results for.(see screenshot for the result that i want to make dinamically )

    Can somebody please tell me how to get the plugin invoked in the metagrid and then how to modify the header rows dinamically
    thanks


    i tried with

    Code:
    this.plugins.push(eval(meta.plugins[0]));
    
    and with
    Code:
    this.getColumnModel().rows=eval(meta.plugins[0].config.rows);
    



    some jsondata
    Code:
    "metaData":{ "defaultSortable":true, "sortInfo":{ "field":"id", "direction":"ASC" }, "plugins":[ new Ext.ux.plugins.GroupHeaderGrid({ "rows":[
    {}, { "header":"Test", "colspan":3,
    "align":"center" }
    ], "hierarchicalColMenu": true }) ], "fields":[ { "name":"id", "mapping":"companyID", "header":"ID", "align":"right", "width":40
    },

  2. #2

    Default

    I almost have it done , but for some reasons i dont get all the values to show for the columns in the grid onley the GROUPDAY
    .

    Hers an example json:
    Code:
     
    {"metaData":{"root":"results","totalProperty":"totalResults","fields":[{"name":"GROUPDAY","type":"string"},{"name":"SOURCEYLINEMINS1_1","type":"int"},{"name":"SOURCEYLINEMINS1_1CALLS","type":"int"},{"name":"SOURCEYLINEMINS1_1MINS","type":"int"},{"name":"NUMBER_ID","type":"int"},{"name":"NUMBER","type":"int"},{"name":"SOURCE","type":"int"},{"name":"BILLING","type":"int"},{"name":"SOURCEYLINEMINS2_1","type":"int"},{"name":"SOURCEYLINEMINS2_1CALLS","type":"int"},{"name":"SOURCEYLINEMINS2_1MINS","type":"int"}]},"totalResults":31,"results":[{"GROUPDAY":"2010-05-01"},{"GROUPDAY":"2010-05-02"},{"GROUPDAY":"2010-05-03"},{"GROUPDAY":"2010-05-04"},{"GROUPDAY":"2010-05-05"},{"GROUPDAY":"2010-05-06","SOURCEYLINEMINS1_1":"1_1","SOURCEYLINEMINS1_1CALLS":"45","SOURCEYLINEMINS1_1MINS":"5327","NUMBER_ID":"2","NUMBER":"600123456","SOURCE":"1","BILLING":"1"},{"GROUPDAY":"2010-05-07"},{"GROUPDAY":"2010-05-08"},{"GROUPDAY":"2010-05-09"},{"GROUPDAY":"2010-05-10","SOURCEYLINEMINS1_1":"1_1","SOURCEYLINEMINS1_1CALLS":"76","SOURCEYLINEMINS1_1MINS":"48","NUMBER_ID":"2","NUMBER":"600123456","SOURCE":"1","BILLING":"1"},{"GROUPDAY":"2010-05-11","SOURCEYLINEMINS1_1":"1_1","SOURCEYLINEMINS1_1CALLS":"34","SOURCEYLINEMINS1_1MINS":"333","NUMBER_ID":"2","NUMBER":"600123456","SOURCE":"2","BILLING":"1","SOURCEYLINEMINS2_1":"2_1","SOURCEYLINEMINS2_1CALLS":"34","SOURCEYLINEMINS2_1MINS":"55"},{"GROUPDAY":"2010-05-12"},{"GROUPDAY":"2010-05-13"},{"GROUPDAY":"2010-05-14"},{"GROUPDAY":"2010-05-15"},{"GROUPDAY":"2010-05-16"},{"GROUPDAY":"2010-05-17"},{"GROUPDAY":"2010-05-18"},{"GROUPDAY":"2010-05-19"},{"GROUPDAY":"2010-05-20"},{"GROUPDAY":"2010-05-21"},{"GROUPDAY":"2010-05-22"},{"GROUPDAY":"2010-05-23"},{"GROUPDAY":"2010-05-24"},{"GROUPDAY":"2010-05-25"},{"GROUPDAY":"2010-05-26"},{"GROUPDAY":"2010-05-27"},{"GROUPDAY":"2010-05-28"},{"GROUPDAY":"2010-05-29"},{"GROUPDAY":"2010-05-30"},{"GROUPDAY":"2010-05-31"}]}


    Code:
    
    

    and the groupheaderplugin code
    [CODE]
    /*
    * GroupHeaderGrid version 1.3
    */
    Ext.namespace("Ext.ux.plugins");

    Ext.ux.plugins.GroupHeaderGrid = function(config) {
    this.config = config;
    };

    Ext.extend(Ext.ux.plugins.GroupHeaderGrid, Ext.util.Observable, {
    init: function(grid) {
    Ext.applyIf(grid.colModel, this.config);
    Ext.apply(grid.getView(), this.viewConfig);
    },

    viewConfig: {
    initTemplates: function() {
    this.constructor.prototype.initTemplates.apply(this, arguments);
    var ts = this.templates || {};
    if (!ts.gcell) {
    ts.gcell = new Ext.XTemplate(
    '[TD="class: x-grid3-hd {cls} x-grid3-td-{id} ux-grid-hd-group-row-{row}"]',
    '',
    '',
    '{value}
    ',
    '[/TD]
    '
    );
    }
    this.templates = ts;
    this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d )", "");
    },

    renderHeaders: function() {
    var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' this.getTotalWidth() ';';
    for (var row = 0, rlen = rows.length; row < rlen; row ) {
    var r = rows[row], cells = [];
    for (var i = 0, gcol = 0, len = r.length; i < len; i ) {
    var group = r[i];
    group.colspan = group.colspan || 1;
    var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol);
    var gs = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol);
    cells[i] = ts.gcell.apply({
    cls: group.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
    id: id,
    row: row,
    style: 'width:' gs.width ';' (gs.hidden ? 'display:none;' : '') (group.align ? 'text-align:' group.align ';' : ''),
    tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') '="' group.tooltip '"' : '',
    istyle: group.align == 'right' ? 'padding-right:16px' : '',
    btn: this.grid.enableHdMenu

Posting Permissions

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