ExtJs-GridPanel中两个RowExpander嵌套出现的问题

posted by David Chen at July 23, 2008, 8:55 AM    

如果一个GridPanel g1中使用了RowExpander r1,而在r1中又生成了另一个GridPanel g2，
g2中又使用了RowExpander r2的时候, r2的+,- 的图标的将显示不正确。
原因，在collapse 事件中查看参数 row的parentNode的html
可以看到如下的代码：

在row的TR中嵌有className为x-grid3-row-expander的div, 再仔细看源码, 改变图标只是由
最外层的div的className控制，即.x-grid3-row-expanded或x-grid3-row-collapsed
如果这样的话，第一个RowExpander r1将永远控制第二个RowExpander r2的图标，当r1图标
为+的时候，没论怎样, r2的图标也只能是+, 同理图标-也一样.
要改变这个，就必须修改或重写一些css属性.

1) 定义3个css, 基本上从 grid.css中copy出来
.my_collapsed {

width:100%
    height:18px;
    background-position:4px 2px;
    background-repeat:no-repeat;
    background-color:transparent;
    background-image:url(./extjs/row-expand-sprite.gif);
}
.my_expanded {
    width:100%;
    height:18px;
    background-position:-21px 2px;
    background-repeat:no-repeat;
    background-color:transparent;
    background-image:url(./extjs/row-expand-sprite.gif);
}
// resourceWeek_c 是我定义的RowExpander r2的id, 自动加到className为x-grid3-row-expander的div的父div中
// 用这个css,可以默认使r2图标加载都只显示+号
.x-grid3-col-resourceWeek_c .x-grid3-row-expander {
    background-position:4px 2px;
}

2) 在r2中监听相关 listeners

listeners: {
    expand: function(a, rd, b, idx, r) {
        var div = (Ext.fly(r).child('tr:nth(1) div.x-grid3-row-expander', true)
                       || Ext.fly(r).child('tr:nth(1) div.my_collapsed', true));
        if( div ) div.className = 'my_expanded';
        // 改变css
    },
    collapse: function(a, rd, b, idx, r) {
        var div = (Ext.fly(r).child('tr:nth(1) div.x-grid3-row-expander', true)
                       || Ext.fly(r).child('tr:nth(1) div.my_expanded', true));
        if( div ) div.className = 'my_collapsed';
        // 改变css
    }
}

3) 修改RowExpander的onMouseDown源码,当然不会影响原来的功能
var b = ( t.className == 'x-grid3-row-expander' || t.className == 'my_collapsed' || t.className == 'my_expanded' );
if( b ) ... // 因为修改了div的className,这里也必须要跟着改
4) 效果图