1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    1
    pupknuck is on a distinguished road

      1  

    Default Unanswered: Setting Grid Column Header Height

    Unanswered: Setting Grid Column Header Height


    New to ExtJs , I am having trouble figuring out how to best set the Height of a Column Header inside a grid:

    Ive tried implementing via a listener:

    listeners: {
    beforerender: function (cmp, eOpts) {
    cmp.columns[0].setHeight(30);
    }
    }



    and the result is the grid body doesn't show, and I get an error inside firebug console:


    TypeError: headerContext.borderInfo is undefined


    I have also tried setting the columns object elements with a height as such:

    columns: [
    {id:'company',header: "Company", height:26,width: 180, sortable: true, dataIndex: 'company' },


    It also elicits the same error,

    I have tried the CSS route , and modified the header class but then the header covers the first row cels.

    Im not sure what to do next. please help

    thanks sal

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Location
    Bulgaria
    Posts
    6
    Vote Rating
    0
    Georgi Yankov is on a distinguished road

      0  

    Default


    Try this example. For me it works on Ext JS 4.0.7

    Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
    data:[
    {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
    {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
    {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
    {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
    {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
    ]
    });


    Ext.create('Ext.grid.Panel', {
    title: 'Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
    {text: 'First Name', dataIndex:'firstname', height: 40},
    {text: 'Last Name', dataIndex:'lastname'},
    {text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'},
    {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
    ],
    width: 400,
    renderTo: Ext.getBody()
    });

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    0
    alsid is on a distinguished road

      0  

    Default


    Have the same issue. Here is an example app:
    Code:
    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.test', 'app');
    Ext.application({
        name: 'Grid reconfigure test',
        launch: function(){
            Ext.create('Ext.container.Viewport', {
                items: [{
                    xtype: 'container',
                    items: [{
                        xtype: 'grid',
                        id: 'gridId',
                        columns: [],
                        store: new Ext.data.Store({fields: []})}]}],
                listeners: {afterrender: function(){
                    var grid = Ext.getCmp('gridId');
                    grid.reconfigure(new Ext.data.Store({
                        fields: [
                            'field1',
                            'field2',
                            'field3'],
                        data: [{
                            field1: 2,
                            field2: 'text1',
                            field3: 'text2'}],
                        proxy: {
                            type: 'memory',
                            reader: {type: 'json'}}}), [
                        {
                            text: 'Field 1',
                            width: 135,
                            height: 45,
                            dataIndex: 'field1'},
                        {
                            text: 'Field 2',
                            width: 60,
                            height: 45,
                            dataIndex: 'field2'}]);
                }
    
                }
            });
        }});
    Using ExtJS 4.1.3 - it works.
    Using ExtJS 4.2.0 - I'm getting the following error Cannot read property 'height' of undefined
    The problem is the same in different browsers. After some debugging it uppears that "borderInfo" object of Ext.layout.ContextItem class is not initialized. Changing this object reference to getBorderInfo() method solves the problem. It also works with ExtJs 4.2.0 if height/width column settings are commented out.

    Is this a bug?


  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    1
    pupknuck is on a distinguished road

      0  

    Default


    Ive tried goergi's code and still get error,

    @Alsid :

    could you demonstrate your work around

    "Changing this object reference to getBorderInfo() "

    thanks!

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    0
    alsid is on a distinguished road

      0  

    Default


    I was experimenting and changed the code in Ext.grid.column.Column class:
    Code:
    availableHeight -= headerContext.borderInfo.height;
    to
    Code:
    availableHeight -= headerContext.getBorderInfo().height;
    because getBorderInfo() method just initializes borderInfo in a lazy way.

    This method is in a Ext.layout.ContextItem class.

    This is an experiment and it's definitely not a solution of the problem.

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    0
    alsid is on a distinguished road

      0  

    Default


    It looks like problem solved in latest 4.2.1 release of Ext JS.

Thread Participants: 2

Tags for this Thread