Results 1 to 3 of 3

Thread: ColumnHeaderGroup issue

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    6

    Default ColumnHeaderGroup issue

    ColumnHeaderGroup issue


    Hi guys,

    I am trying to create the table from the picture (target.jpg).
    For this, I used ColumnHeaderGroup.
    I need to have a "select all" checkbox on left hand that would check/uncheck all the visible rows,
    and two "select all" columns (Canada and US), that will check/uncheck all visible checkboxes from
    the respecive columns (Canada or US).

    I modified the ColumnHeaderGroup sample from ../ext-3.3.1/examples/grid.

    I have couple of things that are not working:

    1. The empty cells from header are visible; in target1.jpg the empty cells are merged with the ones with text.

    2. In ColumnHeaderGroupTest_1.html/column-header-group-test_1.js I added just the lefthand checkboxes, but they also in header rows and I need them just once
    (one "Select All" checkbox in header).

    3. In ColumnHeaderGroupTest_2.html/column-header-group-test_2.js I tried to add the "select All" checkboxes for Canada and US.
    Like in situation #2, the checkboxes appear on both rows of the header, the title of the header have text over, and the checkboxes are doubled.

    Can somebody help with this, please?
    I spent a lot of time trying to make this work but without big success.

    I added two new images to be more explicit how ColumnHeaderGroupTest_1.html/
    ColumnHeaderGroupTest_2.html are being displayed (example1.jpg/example2.jpg).
    target.jpgexample1.jpgexample2.jpg

    Regards,
    Horatiu
    Attached Files Attached Files

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    All of the drawing issues have been resolved in 3.4.
    The issue with your test alignment can be corrected using CSS text-align.

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    6

    Default ColumnHeaderGroup issue

    Hi Scott,

    Thanks for the answer; for me moving to version 3.4.0 is not an option unfortunately.

    Sorry for posting in plugins group, I didn't know that was for new plugins only not for issues
    regarding plugins.

    Can you gave me other suggestions regarding the ColumnHeaderGroup since I cannot move to 3.4.0?

    I tried to add an extra row in the header, just to add two more checkboxes above "Canada" and "United States" columns [marked with "B" in the attached picture]. The checkboxes will not appear, and more than that, I have in the first column, in the header three checkboxes [marked with A].

    The first two checkboxes cannot be clicked, and the third one is working well. I should have the first checkbox working well, and the next two should not be visible. Do you have any suggestions for this?


    var recordFields = [
    {name: 'unid', type: 'int'},
    {name: 'currencyCode', type: 'string'},
    {name: 'currencyName', type: 'string'},
    {name: 'writeOp', type: 'string'}
    ] ;

    var writer = new Ext.data.JsonWriter({
    writeAllFields : true
    });

    var remoteProxy = new Ext.data.HttpProxy({
    api: {
    read : {
    url: this.formConfig.ajaxReadUrl,
    method: "POST"
    },
    create : {
    url: this.formConfig.ajaxCreateUrl,
    method: "POST"
    },
    update : {
    url: this.formConfig.ajaxModifyUrl,
    method: "POST"
    },
    destroy : {
    url: this.formConfig.ajaxDeleteUrl,
    method: "POST"
    }
    }
    });

    this.currencyListStore = new Ext.data.JsonStore({
    proxy : remoteProxy,
    writer : writer,
    disableCaching : true,
    storeId : 'currencyReaderStoreId',
    root : 'data',
    idProperty : 'unid',
    autoLoad : true,
    totalProperty : 'totalCount',
    remoteSort : true,
    fields : recordFields,
    autoSave : false,
    batch : true,
    listeners :
    {
    exception : function () {
    console.info(arguments);
    }
    }
    });

    var checkSelMod = new Ext.grid.CheckboxSelectionModel({

    listeners: {
    'selectionchange' : {

    fn : function(sm) {
    var noSelections = sm.getCount();
    if(noSelections != 1){
    Ext.getCmp('btnModify').disable();
    }else{
    Ext.getCmp('btnModify').enable();
    }
    },
    scope : this
    }
    }
    });

    var firstRow = [
    {},
    {header: 'Currency Code'},
    {header: 'Currency Name'},
    {header: olbb.wire.nls.FieldLabels.currency_not_available_lbl, colspan: 2, align: 'center', width: 200}
    ];
    var secondRow = [
    {},
    {},
    {},
    {
    xtype : 'container',
    id: 'caChkId'
    },
    {
    xtype : 'container',
    id: 'usChkId'
    }
    ];

    var group = new Ext.ux.grid.ColumnHeaderGroup({
    rows: [firstRow,secondRow]
    });
    // the "columns" is the second row.
    var columns = [
    //{width:5},
    checkSelMod,
    {dataIndex: 'currencyCode', align: 'left', width: 150},
    {dataIndex: 'currencyName', align: 'left', width: 150},
    {
    xtype: 'checkcolumn',
    header: 'Canada',
    align : 'center',
    dataIndex: 'indoor',
    width: 100
    },{
    xtype: 'checkcolumn',
    header: 'United States',
    align : 'center',
    dataIndex: 'indoor1',
    width: 100
    }
    ];

    var gridView = new Ext.grid.GridView({markDirty: false});


    this.grid = new Ext.grid.GridPanel({
    renderTo : this.formConfig.renderTo,
    width : this.itemsWidth,
    height : 300,
    view : gridView,
    columnLines : true,
    tbar : {
    ui : 'light',
    dock : 'top',
    pageSize : 5,
    style : 'background-color : #f0f0f0',
    defaults : {
    xtype : 'button'
    },
    items : [
    {
    id : 'btnModify',
    text : olbb.wire.nls.Buttons.btn_modify,
    handler : modifyHandler,
    scope : this,
    disabled : true
    },{
    xtype: 'tbfill'
    },{
    id : 'btnCreate',
    text : olbb.wire.nls.Buttons.btn_create_currency,
    handler : createHandler,
    scope : this,
    disabled : false
    }
    ]
    },
    store: this.currencyListStore,
    columns: columns,
    viewConfig: {
    forceFit: true
    },
    plugins: group,
    selModel : checkSelMod
    });



    Regards,
    HoratiuextraChecks.jpg

Tags for this Thread

Posting Permissions

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