GroupHeaderGrid - Grouped grid column headers

[rguerette]

I'll re-ask a previous question..
"Condor, any plans for an ExtJS 4 release of this plugin?"

What I really need to know after looking at the examples for ExtJS 4 is, is it possible to combine the features from the Locking Grid Column example and the Grouped Header Grid example? If so, I can probably figure it out.

[dongdong246]

you plugins is have problem!!!!
is'not run

[gustavo21]

Hello, i set it up in a few minutes and is working great!! im new in extjs, but this plugin is just easy to use. I got my store from sql server 2008 and is really fast!

Thanks!!

[krishna62]

Hi Condor,

I have below issue with the ColumnHeaderGroup and new Ext.grid.CheckboxSelectionModel together. The result of the screen as something like below.

http://images.cnblogs.com/cnblogs_co...roupIssue2.jpg

I changed the dataIndex of the column group header different as you suggest but I could not see anything. Can you please let me know if there thing wrong I am doing here.

Below is the code that I am adding the dataIndex.

grdTopHeader.push({ header: '', dataIndex:'Test1',align: 'center', colspan:4}); //
grdTopHeader.push({ header: $.i18n._('Version1'),dataIndex:'Test2', align: 'center', colspan: 10});
grdTopHeader.push({ header: $.i18n._('Version2'),dataIndex:'Test3', align: 'center',colspan: 6});

Thanks,
Krishna

[softm]

Is there some easy way to migrate EditorGridPanel - to have grouped look? As ex. have grid with 7 columns.

1. i add ext-3.3.1/plugins/GroupHeaderPlugin.js, as <script ...
   
   /* * GroupHeaderGrid version 1.4 for Ext 3 */
2. add css 2 lines, and correct img/url path
3. i app to EditorGridPanel definition this:

    grid = new Ext.grid.EditorGridPanel({

        store: store,
        cm: cm,
        renderTo: 'grid',
        width: 958,
        height: 500,
        frame: true,
        loadMask: true,
        clicksToEdit: 1,

// 1'st try add G-H-G
        viewConfig: {
            forceFit: true
        },


        plugins: [new Ext.ux.plugins.GroupHeaderGrid({
            rows: [
                [
                    {},
                    {header: 'Min', colspan: 3, align: 'center'},
                    {header: 'Max', colspan: 3, align: 'center'}
                ]
            ],
            hierarchicalColMenu: true
        })],

After this i got: "undefined" in place of grid and JS error:

el is null

[IMG]chrome://firebug/content/blank.gif[/IMG] mainWrap = new Element(el.child('div.x-grid3-viewport')),


in ext-all-debug.js at 46216 ...

I try debug & no-debug versions of ext. When i remove 2'd red code, i.e. plugins definitions - all start working well.
What am doing wrong? Pls help me ...

[brkz]

I'll re-ask a previous question..
"Condor, any plans for an ExtJS 4 release of this plugin?"

What I really need to know after looking at the examples for ExtJS 4 is, is it possible to combine the features from the Locking Grid Column example and the Grouped Header Grid example? If so, I can probably figure it out.

I second that. Condor, are you still interested in adding Locking grid feature for money?

[Tanmaya]

Hi,I have tried to use the following approach as discussed in this forum,

colModel.rows = ds.meta.rows;colModel.setConfig(ds.columns);

The same is not working for me i have tried to evoke it from both the viewConfig onDataChange and the stores load listener, but in both cases my grid is only loading with the normal column structure and the header columns are not being foundmy js code is :

var overViewGridStore = new Ext.data.JsonStore({			fields : [],			url : overViewGridStoreUrl,			autoLoad : true,			listeners : {				load : function() {							//Ext.getCmp('overViewGrid').getColumnModel().rows = this.reader.jsonData.metaData.headers;;						//Ext.getCmp('overViewGrid').getColumnModel().setConfig(this.reader.jsonData.columns);								alert(Ext.getCmp('overViewGrid').getColumnModel().rows);											},				exception : function() {					Ext.MessageBox.show({						icon : Ext.MessageBox.ERROR,						buttons : Ext.MessageBox.OK,						msg : "Please contact the administrator.",						title : 'Error'					});				}			}		});			var group = new Ext.ux.grid.ColumnHeaderGroup({					rows : []				});		var overViewGrid = new Ext.grid.GridPanel({					title : 'grid',					anchor : '100% 100%',					id : 'overViewGrid',					store : overViewGridStore,					autoScroll : true,					columns : [],					viewConfig:{					forceFit : true,					onDataChange: function (){						//	this.cm.rows = this.ds.reader.jsonData.metaData.headers;						//	this.cm.setConfig(this.ds.reader.jsonData.columns);							}						}					plugins : group				});

and my JSON data from server is of the form

{    "metaData": {        "headers": [            {                "align": "center",                "colspan": "1"            },            {                "align": "center",                "header": "xxxxx",                "colspan": "5"            }        ],        "idProperty": "transaction",        "root": "root",        "fields": [            {                "mapping": "transaction",                "name": "transaction"            },            {                "mapping": "time1",                "name": "time1"            },            {                "mapping": "count1",                "name": "count1"            },            {                "mapping": "rt1",                "name": "rt1"            },            {                "mapping": "xcount1",                "name": "xcount1"            },            {                "mapping": "xrt1",                "name": "xrt1"            }        ]    },    "root": [],    "columns": [        {            "align": "center",            "header": "Transactions",            "dataIndex": "transaction",            "sortable": "true",            "hideable": "false",            "id": "transaction"        },        {            "align": "left",            "header": "Time",            "dataIndex": "time1",            "sortable": "true",            "hideable": "false",            "id": "time1"        },        {            "align": "left",            "header": "Count",            "dataIndex": "count1",            "sortable": "true",            "hideable": "false",            "id": "count1"        },        {            "align": "left",            "header": "Response Time",            "dataIndex": "rt1",            "sortable": "true",            "hideable": "false",            "id": "rt1"        },        {            "align": "left",            "header": "Failed Count",            "dataIndex": "xcount1",            "sortable": "true",            "hideable": "false",            "id": "xcount1"        },        {            "align": "left",            "header": "Failed Response Time",            "dataIndex": "xrt1",            "sortable": "true",            "hideable": "false",            "id": "xrt1"        }    ]}

I am able to render the followinggrid.jpg

[sabhandari]

It doesn't work for me. The error I get is:

Ext.ux.grid is undefined

[xiexiest]

I want to the groupHeader be strong ,and the font-size be bigger .
how to add the css?
Can you help me ?

plugins: [new Ext.ux.plugins.GroupHeaderGrid({
    rows: [
      [
      {header: 'HostInfo, colspan: 13, align: 'center'},
      {header: 'In', colspan: 9, align: 'center'},
      {header: 'Out', colspan: 9, align: 'center'},
      {header: 'Others', colspan: 2, align: 'center'}
     ]
    ],
    hierarchicalColMenu: true
   })],