ExtJS getClass() 동적으로 아이콘 숨기기/표시

Question

Sencha Architect 사용 작업 열이있는 표를 시도하고 있습니다. 열은 눈금 행의 값에 따라 숨기거나 표시되는 두 개의 가능한 아이콘을가집니다. 이것은 잘 문서화 된 유스 케이스이며 예제 코드를 가능한 한 자세히 따라 가려고했지만 단순히 작동시키지 못한다.

  columns: [ 
      { 
       xtype: 'actioncolumn', 
       width: 50, 
       dataIndex: 'IsFilter', 
       items: [ 
        { 
         getClass: function(v, metadata, r, rowIndex, colIndex, store) { 
          var isFilter = r.get('IsFilter'); 
          if (!isFilter) { 
           return "x-hide-display"; 
          } else { 
           console.log(r.get('Title') + ' sort'); 
           return "x-grid-center-icon"; 
          } 
         }, 
         icon: 'resources/Images/png/sort35.png' 
        }, 
        { 
         getClass: function(v, metadata, r, rowIndex, colIndex, store) { 
          if (v) { 
           return "x-hide-display"; 
          } else { 
           console.log(r.get('Title') + ' filter'); 
           return "x-grid-center-icon"; 
          } 
         }, 
         icon: 'resources/Images/png/funnel6.png' 
        } 
       ] 
      } 

올바른 콘솔 메시지가 표시되면서 논리가 작동한다는 것을 알고 있습니다. 원하는 결과는 하나의 아이콘 또는 다른 아이콘을 표시하는 것입니다. 대신 항상 두 아이콘을 표시합니다. 그래서 내가 뭘 잘못하고 있니?

Answer 1

문제는 논리를 단순화 할 때 논리적이어야하며 참과 거짓 값을 바꿀 때 문제가됩니다. r.get('IsFilter'); 및 if (v) { 실제로 당신이 바로 그 시간에 기대 것이 무엇 반환하는 경우

columns: [ 
     { 
      xtype: 'actioncolumn', 
      width: 50, 
      dataIndex: 'IsFilter', 
      items: [ 
       { 
        getClass: function(v, metadata, r, rowIndex, colIndex, store) { 
         if (true) { 
          return "x-hide-display"; 
         } else { 
          console.log(r.get('Title') + ' sort'); 
          return "x-grid-center-icon"; 
         } 
        }, 
        icon: '/js/ext-3.4.0/resources/images/access/menu/unchecked.gif' 
       }, 
       { 
        getClass: function(v, metadata, r, rowIndex, colIndex, store) { 
         if (false) { 
          return "x-hide-display"; 
         } else { 
          console.log(r.get('Title') + ' filter'); 
          return "x-grid-center-icon"; 
         } 
        }, 
        icon: '/js/ext-3.4.0/resources/images/access/menu/checked.gif' 
       } 
      ] 
     }, 

확인 확인합니다.

Answer 2

나는 문제가 당신이 items.Instead의 아이콘이 X-그리드 센터 아이콘 및 X 숨기기 디스플레이 대가로, CSS 클래스 예에 아이콘을 추가 모두 추가 생각 그 상태에 기반한 수업.

코드는 다음과 같습니다.

columns: [ 
      { 
       xtype: 'actioncolumn', 
       width: 50, 
       dataIndex: 'IsFilter', 
       items: [ 
        { 
         getClass: function(v, metadata, r, rowIndex, colIndex, store) { 
          var isFilter = r.get('IsFilter'); 
          if (!isFilter) { 
           return "hideDisplay"; 
          } else { 
           console.log(r.get('Title') + ' sort'); 
           return "showIcon"; 
          } 
         }, 

        }, 
        { 
         getClass: function(v, metadata, r, rowIndex, colIndex, store) { 
          if (v) { 
           return "hideDisplay"; 
          } else { 
           console.log(r.get('Title') + ' filter'); 
           return "showIcon"; 
          } 
         }, 

        } 
       ] 
      } 


CSS add the following : 


    .hideDisplay 
    { 
     width: 32px; 
     height: 32px; 
     background-image:none; 
    } 

    .showIcon 
    { 
     width: 32px; 
     height: 32px; 
     background-image:resources/Images/png/sort35.png 
    } 

희망이 도움이 될 것입니다.