1

我试图根据值显示一个图标，如果值为 0，则它不会显示任何图标，当为 1 或大于 0 时，它将显示一个带有支持单击事件的处理程序的图标，该事件将显示另一个图标，该图标不是图像，而是在 actioncolumn 中使用 iconCls 参数的样式正方形。所以我现在的主要问题是，如果值为 0，我不能让 actioncolumn 停止显示图标，它只会显示两个正方形，并且完全一团糟。我使用渲染器尝试了不同的方法，但结果仍然很奇怪。所以这是我到目前为止的代码。此练习与此处相同，但有一个额外的决定。 http://www.learnsomethings.com/2011/09/25/the-new-extjs4-xtype-actioncolumn-in-a-nutshell/ 


`this.columns = [
            {header: 'Estado', dataIndex:'icon', renderer:this.renderIcon, width:35},
            {
                    header:'Geo',
                    width:35,
                    xtype:'actioncolumn',
                    items: [{
                            iconCls:'showGeofence',
                            tooltip:'Geocerca Visible.',
                            handler: function(grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                grid.getStore().getAt(rowIndex).set('geo', 0);
                                grid.getSelectionModel().select(rowIndex);
                            },
                            getClass: function(value,metadata,record){
                                var closed = record.get('geo');
                                    if (closed == 0) {
                                        return 'x-hide-display';
                                    } else {
                                        return 'x-grid-center-icon';
                                    }
                            }
                    },{
                            iconCls:'hideGeofence',
                            tooltip:'Geocerca no Visible.',
                            handler: function(grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                grid.getStore().getAt(rowIndex).set('geo', 1);
                                grid.getSelectionModel().select(rowIndex);
                            },
                            getClass: function(value,metadata,record){
                                var closed = record.get('geo');
                                    if (closed == 1) {
                                        return 'x-hide-display';
                                    } else {
                                        return 'x-grid-center-icon';
                                    }

                            }
                    },{
                            iconCls:'noGeofence',
                            tooltip:'Geocerca no Configurada.',
                            getClass: function(value,metadata,record){
                                var closed = record.get('geo');
                                if(closed !== undefined && typeof(closed)==number){
                                    return 'x-hide-display';
                                }else{
                                    return 'x-grid-center-icon';
                                }
                            }
                    }]
            },
            {header: 'Descripcion', dataIndex:'descripcion',flex:1},
            {header: 'id', dataIndex:'id', hidden:true}
        ];`
4

2 回答 2

3

基于 3 个决定，我做出了这个糟糕的解决方法，它有效，但老实说太可怕了......诀窍就是使用处理程序在点击行为后设置的值。所以基于这个事实，我这样做了。我希望这可能对未来的任何人有所帮助，或者它可以作为后代可怕编程的一个例子。干杯。


`this.columns = [
            {header: 'Estado', dataIndex:'icon', renderer:this.renderIcon, width:35},
            {
                header:'Geo',
                width:35,
                xtype:'actioncolumn',
                items: [{
                    iconCls:'hideGeofence',
                    tooltip:'Geocerca Visible.',
                    action:'hidegeofence',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        Ext.example.msg("Informacion","Mostrando Geocerca.");
                        grid.getStore().getAt(rowIndex).set('id_geocerca','a');
                        grid.getSelectionModel().select(rowIndex);
                    },
                    getClass: function(value,metadata,record){
                        var closed = record.get('id_geocerca');
                            if(closed>0){
                                return 'x-grid-center-icon';
                            }else{
                                return 'x-hide-display';
                            }
                    }
                },{
                    iconCls:'showGeofence',
                    tooltip:'Geocerca Visible.',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        Ext.example.msg("Informacion","Ocultando Geocerca.");
                        grid.getStore().getAt(rowIndex).set('id_geocerca',1);
                        grid.getSelectionModel().select(rowIndex);
                    },
                    getClass: function(value,metadata,record){
                        var closed = record.get('id_geocerca');
                            if(closed=='a'){
                                return 'x-grid-center-icon';
                            }
                            if(closed>0 || closed==0){
                                return 'x-hide-display';
                            }
                    }
                }]
            },
            {header: 'Descripcion', dataIndex:'descripcion',flex:1},
            {header: 'id', dataIndex:'id', hidden:true}
        ];`
于 2012-09-12T13:24:59.820 回答
1

当您还使用 getClass 指定图标时，在单击时不会调用 actioncolumn 处理函数。我在 CSS 中声明了一个空图标。.x-action-col-icon{ 宽度：30px; 垂直对齐：底部；}

.../ 为 x-grid-center-icon 和 x-hide-display 添加剩余的 css

在 actioncolumn 定义中添加图标：''，

于 2014-11-18T20:11:34.743 回答