我如何顯示一個基於iconCls的圖標使用extjs 4中的actioncolumn 3個決定？

我試圖顯示一個圖標取決於值，如果值爲0，那麼它不會顯示任何圖標，當是1或大於0的東西時，它會顯示帶有支持單擊事件的處理程序的圖標，該事件將顯示另一個圖標，圖標不是圖像是在actioncolumn中使用iconCls參數的樣式化正方形。所以我現在的主要問題是，我不能讓actioncolumn停止顯示圖標，如果值爲0，它只是顯示兩個方塊一個在另一個上，是一個完整的混亂。我使用渲染器嘗試了不同的方法，結果仍然很奇怪。所以這是我的代碼。這個練習和這裏一樣，但有一個額外的決定。 http://www.learnsomethings.com/2011/09/25/the-new-extjs4-xtype-actioncolumn-in-a-nutshell/我如何顯示一個基於iconCls的圖標使用extjs 4中的actioncolumn 3個決定？


`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} 
     ];`

來源

2012-09-11 Luis Parada

基於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-12 13:24:59

當您還使用getClass指定圖標時，actioncolumn處理函數不會在點擊時被調用。我有一個空的圖標在CSS中聲明。 .x-action-col-icon { width：30px; vertical-align：bottom; }

... /添加您actioncolumn定義x柵格中心的圖標和X-隱藏顯示

剩餘CSS添加圖標： ''，

來源

2014-11-18 20:11:34 yfeleke

我如何顯示一個基於iconCls的圖標使用extjs 4中的actioncolumn 3個決定？

回答

相關問題