1. #51
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default


    Ofcourse not. I'll take a look, thanks

  2. #52
    Sencha User
    Join Date
    Jul 2010
    Posts
    42
    Vote Rating
    0
    nosferatum is on a distinguished road

      0  

    Default


    Oh, I didn't look at 3.3.0 yet, still using 3.2.1 in my project. I'll try ColumnGroupHeader plugin, hoping it works better then Ext.ux.plugins.GroupHeaderGrid.

  3. #53
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I updated the first post to indicate this.
    This plugin is only meant for Ext 3.0. In Ext 3.1+ it is included in the SDK examples/ux folder (renamed to ColumnHeaderGroup).

  4. #54
    Sencha User
    Join Date
    Jul 2010
    Posts
    42
    Vote Rating
    0
    nosferatum is on a distinguished road

      0  

    Default


    Yes, you're right, and it's already in examples. And multiple sorting too. Nice. I'll try both.

    Then it'll be great also to improve and include LiveGrid extension to standard Extjs extensions.

  5. #55
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Melrose, MA
    Posts
    48
    Vote Rating
    3
    hjones is on a distinguished road

      0  

    Default


    This is a great plugin...I'm using it with hierarchicalColMenu: false.

    When the user clicks on the header menu and on the Columns option ALL the checked menu items underneath get checked...with no visible change to the visible columns.
    This appears to be a bug? When the user clicks on the Columns header menu item....all child items get checked but not actual column changes.
    I've noted that this happens when hierarchicalColMenu: true too.

    I fixed this by wrapping the section of code in the default block of function handleHdMenuClick with the following guard condition...

    HTML Code:
                    	if (id !== 'columns') { /* START FIX */
    
                        item.checked = !item.checked;
                        if(item.menu){
                            var updateChildren = function(menu){
                                menu.items.each(function(childItem){
                                    if(!childItem.disabled){
                                        childItem.setChecked(item.checked, false);
                                        if(childItem.menu){
                                            updateChildren(childItem.menu);
                                        }
                                    }
                                });
                            }
                            updateChildren(item.menu);
                        }
                        var parentMenu = item, parentItem;
                        while(parentMenu = parentMenu.parentMenu){
                            if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
                                break;
                            }
                            var checked = parentMenu.items.findIndexBy(function(m){
                                return m.checked;
                            }) >= 0;
                            parentItem.setChecked(checked, true);
                        }
                        item.checked = !item.checked;
                        
                    	} /* END FIX */
    This stops the group checking from happening on the default 'Columns' parent menu item in the header menu.

  6. #56
    Sencha User
    Join Date
    Dec 2007
    Posts
    4
    Vote Rating
    0
    lugreen is on a distinguished road

      0  

    Default


    Hi,thanks your great work;
    I want to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel.
    but i find that the group header cant't render correctly,how to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel?

  7. #57
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by lugreen View Post
    Hi,thanks your great work;
    I want to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel.
    but i find that the group header cant't render correctly,how to use ColumnHeaderGroup with RowExpander、CheckboxSelectionModel?
    Those should work together. What exactly is the problem?

  8. #58
    Sencha User
    Join Date
    Dec 2007
    Posts
    4
    Vote Rating
    0
    lugreen is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Those should work together. What exactly is the problem?
    I simply modified the ColumnHeaderGroup demo for test:



    the code is :

    Code:
      ...
    
      ...
    
      ...
    
      var sm = new xg.CheckboxSelectionModel(); //add 
    
      var expander = new Ext.ux.grid.RowExpander({
            tpl : new Ext.Template(
                '<p><b>Company:</b> {ParisProductX}</p><br>'            
            )
        }); // add
      columns=[sm,rownum,expander].concat(columns); //add
        var grid = new Ext.grid.GridPanel({
            renderTo: document.body,
            title: 'Sales By Location',
            width: 1000,
            height: 400,
            store: new Ext.data.ArrayStore({
                fields: fields,
                data: data
            }),
            columns: columns,
            viewConfig: {
                forceFit: true
            },
            plugins:[group,expander]
      ,sm:sm  
        });
    i taked screenshot :


  9. #59
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    That's a know css problem of CheckboxSelectionModel.

    The easiest way to solve this is to specify a different dataIndex in you columngroups.

  10. #60
    Ext User
    Join Date
    Oct 2010
    Posts
    5
    Vote Rating
    0
    araaku is on a distinguished road

      0  

    Default


    Hello Condor,

    Thanks!!
    It worked like a charm for me!!

    Can you please help me in, check/uncheck the parent column as well, when one or more child columns are checked/unchecked.

    For eg: Suppose "A" is a group and it has three childs (A1, A2, A3). I want as and when i am checking A1/A2/A3, "A"(parent column) automatically gets checked at same time....


    My menu click code is here:

    Code:
            handleHdMenuClick : function(item){            
                var index = this.hdCtxIndex,
                    cm = this.cm, 
                    ds = this.ds,
                    id = item.getItemId();
                switch(id){
                    case 'asc':
                        ds.sort(cm.getDataIndex(index), 'ASC');
                        break;
                    case 'desc':
                        ds.sort(cm.getDataIndex(index), 'DESC');
                        break;
                    default:
                        if(id.substr(0, 5) == 'group'){                                        
                            var i = id.split('-'),
                                row = parseInt(i[1], 10), col = parseInt(i[2], 10),
                                r = this.cm.rows[row], group, gcol = 0;
                            for (var i = 0, len = r.length; i < len; i++) {
                                group = r[i];
                                if (col >= gcol && col < gcol + group.colspan) {
                                    break;
                                }
                                gcol += group.colspan;
                            }
                            if(item.checked){                                        
                                var max = cm.getColumnsBy(this.isHideableColumn, this).length;
                                for (var i = gcol, len = gcol + group.colspan; i < len; i++){                        
                                    if(!cm.isHidden(i)){                                
                                        max--;
                                    }
                                }
                                if(max < 1){                                                    
                                    this.onDenyColumnHide();                                
                                    return false;
                                }                        
                            }
                            for (var i = gcol, len = gcol + group.colspan; i < len; i++){                        
                                if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){                                                
                                    cm.setHidden(i, item.checked);
                                }
                            }
                        }
                        //if menu is not a group  //custom
                        else{                    
                            index = cm.getIndexById(id.substr(4));
                            if(index != -1){
                                if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
                                    this.onDenyColumnHide();
                                    return false;
                                }                          
                                cm.setHidden(index, item.checked);                            
                              }
                        }
                        item.checked = !item.checked;  //custom                    
                        if(item.menu){                
                            var updateChildren = function(menu){
                                menu.items.each(function(childItem){                            
                                    if(!childItem.disabled){                                    
                                        childItem.setChecked(item.checked, true);
                                        if(childItem.menu){                                
                                            updateChildren(childItem.menu);
                                        }
                                    }
                                });
                            }
                            updateChildren(item.menu);                        
                        }
                        
    
                        var parentMenu = item, parentItem;
                        while(parentMenu = parentMenu.parentMenu){
                            console.log(parentMenu);
                            if(!parentMenu.parentMenu ||
                                !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) ||
                                !parentItem.setChecked){
                                break;
                            }
                            var checked = parentMenu.parentMenu.items.findIndexBy(function(m){
                                return m.checked;
                            }) >= 0;
                            parentItem.setChecked(checked, true);
                        }
                        item.checked = !item.checked;
                }
               
                return true;
            },

    Looking forward for your response.
    Last edited by Condor; 22 Nov 2010 at 7:03 AM. Reason: Please post using [CODE] tags!