1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    Narat is on a distinguished road

      0  

    Default GRIDPANEL WITH NUMBERED HEADER COLUMNS

    GRIDPANEL WITH NUMBERED HEADER COLUMNS


    Hi, all!

    Please help!

    Using ExtJS 4.1.
    I have a grid with grouped header columns.
    Is it possible to create a gridpanel with numbered header columns? Under numbering I mean sequence "1, 2, 3, ...". I tried, with such result:

    header.jpg

    Please, answer, how to get following:
    header_correct.jpg

    I could not manage to set the height of last header row. It is the problem for me.
    Waiting for any help.

    Best regards.
    Attached Images

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    Narat is on a distinguished road

      0  

    Default addition

    addition


    I suppose that it could be solved applying CSS.
    Now I applied following:


    .x-column-header-inner .x-column-header-text {
    white-space: normal!important;
    }

    .x-column-header-inner {
    white-space: normal!important;
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    /*
    top: 20%;
    */
    }

    .x-grid3-hd-inner { white-space: normal; }


    But have no idea, how to find the right answer.

    I tried to iterate columns and change the height of columns in numbered row and that of parent row, but with no acceptable result.

    Any suggestion?

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    A.Orehov is on a distinguished road

      0  

    Default I was trying to solve same problem too...

    I was trying to solve same problem too...


    Hi,

    But I tried to use the first grid row for the same purpose and lock it...

    Nobody could help me too...

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    A.Orehov is on a distinguished road

      0  

    Default Solved. But in some cases no proper result

    Solved. But in some cases no proper result


    After some work, can suggest one of variants for this issue.

    The idea is in adding to header columns with dataIndex property two additional DIVs in "render" event of these header columns, while dynamically generating hierarchically organized header columns list:

    HTML Code:
    <div class="q-ex-class"><div class="q-in-class">' + c.colNum.toString() + '</div></div>'

    Code:
    .......
    
    cls: 'dop_',               
    colNum: colNum++,
    dataIndex: rec.get('dataIndex'),
    level: rec.get('level'),
    text: rec.get('text'),
    
    listeners: {
                render: function(c) {
                    c.getEl().createChild( '<div class="q-ex-class"><div class="q-in-class">' + c.colNum.toString() + '</div></div>');
    },
    
    .......

    CSS is like that:

    HTML Code:
    .q-ex-class {
        position: relative; 
    }
    
    .q-in-class {
        color: maroon; 
        font-weight: 700;
        font-size: 9px;
        text-align: center;
        border-top: 1px solid #C5C5C5;
        height: 13px; 
        position: absolute; 
        bottom: 0px;
        width: 100%;
    }
    Additionally, header colums with dataIndex property were accompanied with CSS:


    HTML Code:
    .dop_ {
        margin-bottom: 13px!important; /*  must be equal to 'q-in-class'' height */
        height: auto!important;    
    }
    That's all, but in some cases, and I could not understand, why, this technic is not working properly -
    remains the question with correct height of some header columns within header container.
    May be, masters will correct me. I hope!

    Regards.

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    A.Orehov is on a distinguished road

      0  

    Default I found, that my CSS...

    I found, that my CSS...


    I found, that my following CSS, applied to header columns are to blame:

    HTML Code:
    .x-column-header-inner .x-column-header-text {
        white-space: normal!important;
    }
    
    .x-column-header-inner {
        line-height: normal;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
    But with numbering header columns is all OK.

    The above shown CSS I need to wrap text in header columns only, and they aren't working properly in some rare cases.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    Narat is on a distinguished road

      0  

    Default One of attitudes...

    One of attitudes...


    Just add "afterrender" event listener to your grid:

    ................................................
    afterrender: function(grid){

    var dockedItems = [], hasNumber = false;

    var checkColumn = function(column, i){
    if (!!column['colNum']){
    dockedItems.push({
    xtype: 'component',
    cls: 'x-column-header q-in-class',
    style: 'border-right: 1px solid #C5C5C5!important;',
    width: column.getWidth(),
    html: column.colNum+''
    });

    hasNumber = true;

    } else if (column.items.items.length == 0){
    dockedItems.push({
    style: 'border-right: 1px solid #C5C5C5!important;'+
    (i == 0 ? 'border-left: 1px solid #C5C5C5!important;' : ''),
    xtype: 'component',
    cls: 'x-column-header q-in-class',
    width: i == 0 ? column.getWidth()+1 : column.getWidth(),
    html: ''
    });
    }
    };



    var collectColumns = function(items){

    if (Ext.isArray(items)){

    for (var i=0, cnt=items.length; i<cnt; i++){
    checkColumn(items[i], i);
    collectColumns(items[i].items);
    }
    } else {
    items.each(function(column){
    checkColumn(column);
    collectColumns(column.items);
    });
    }
    };


    collectColumns(grid.columns);

    if (!!hasNumber){

    grid.columnNumberer = Ext.create('Ext.container.Container', {
    dock: 'top',
    baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
    weight: 100,
    border: false,
    items: dockedItems,
    layout:{
    type: 'hbox'
    }
    });

    grid.addDocked(grid.columnNumberer);

    grid.getView().on('bodyscroll', function(e, target) {
    var width = this.headerCt.el.dom.firstChild.style.width;
    grid.columnNumberer.el.dom.firstChild.style.width = width;
    grid.columnNumberer.el.dom.scrollLeft = target.scrollLeft;
    }, grid);
    }
    },
    ...............................

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi