1

値に応じてアイコンを表示しようとしています。値が 0 の場合、アイコンは表示されません。1 または 0 より大きい場合は、クリック イベント、そのイベントをサポートするハンドラーを含むアイコンが表示されます。別のアイコンが表示されます。アイコンは画像ではなく、actioncolumn で iconCls パラメータを使用してスタイル設定された正方形です。したがって、現在の私の主な問題は、値が0の場合、actioncolumnにアイコンの表示を停止させることができないことです.2つの正方形が上下に表示され、完全に混乱しています。レンダラーを使用して別のアプローチを試みましたが、それでも結果は奇妙です。これがこれまでの私のコードです。この演習はここと同じですが、追加の決定があります。 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 に答える