ExtJS Grid Column : 전체 내용을 표시하도록 열 확장

Question

고정 폭의 열이있는 눈금을 만들었습니다. 고정 너비로 ​​인해 일부 열은 최소한 일부 셀에서는 전체 내용을 표시 할만큼 확장되지 않습니다.

이제 머리글을 두 번 클릭하면이 열을 확장 할 수있는 방법을 찾고 있습니다.

ColumnModel에서 setColumnWidth() 함수가 있음을 알았지 만 계속 진행하려면이 최대 길이의 내용을 가져야합니다.

누구에게 조언이 있습니까? 미리 감사드립니다!

Answer 1

내용의 길이에 맞게 열을 확장하는 것은 확실하지 않으며 좋은 방법 일 수 있습니다. 비정상적으로 많은 양의 컨텐츠가 그리드를 끔찍하게 보일 수 있습니다. 그러나 확장하려는 모든 열에 flex를 추가 할 수 있습니다.

columns: [{ 
    header: 'Blah', 
    width: 100, 
    dataIndex: 'Blah' 
},{ 
    header: 'Foo', 
    flex: 1, 
    dataIndex: 'Foo' 
}] 

그 비트에서 Blah가 100px로 할당 된 후 남은 공간을 남기기 위해 Foo 열이 확장됩니다.

Answer 2

이 글은 오래된 글이지만, 같은 문제가 있기 때문에 공유하고 싶습니다.

Ext.grid.column.Column의 click 이벤트 핸들러를 재정 의하여 해결했습니다. 열 헤더의 가장자리를 두 번 클릭하기 위해 처리되는 전용 onElDblClick 이벤트가 있습니다.
이 함수를 재정의하면 전체 열 머리글을 두 번 클릭하여 처리 할 수도 있습니다. 다음은 OnElClick 이벤트 핸들러를 재정 의하여 SetTimeout 호출을 통해 보류중인 더블 클릭 동작이있을 수 있다는 것을 알려주는 것입니다. 그렇지 않으면 정렬과 같은 단일 클릭 이벤트에 첨부 된 모든 이벤트가 항상 호출됩니다.

재정의하려면 아래 코드를 참조하십시오. ExtJS 4.1.1a에서만 테스트했지만 다른 ExtJS 버전으로 쉽게 이식 할 수 있습니다.

 

    // enable doubleclick on the column to expand it to the max width as well 
    Ext.override(Ext.grid.column.Column, { 
     /** 
     * @private 
     * Double click 
     * @param e 
     * @param t 
     */ 
     onElDblClick: function(e, t) { 
      var me = this, 
       ownerCt = me.ownerCt; 
      if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0) { 
       if (me.isOnLeftEdge(e)) { 
        ownerCt.expandToFit(me.previousSibling('gridcolumn')); 
       } else { 
        ownerCt.expandToFit(me); 
       } 
      } 
     }, 
     onElClick: function(e, t) { 
      // The grid's docked HeaderContainer. 
      var me = this, 
       ownerHeaderCt = me.getOwnerHeaderCt(); 

      if (me.el.getAttribute("data-dblclick") == null) { 
       me.el.dom.setAttribute("data-dblclick", 1); 
       setTimeout(function() { 
        if (me.el.getAttribute("data-dblclick") == 1) { 
         handleElClick(me, e, t); 
        } 
        me.el.dom.removeAttribute("data-dblclick"); 
       }, 300); 
      } else { 
       me.el.dom.removeAttribute("data-dblclick"); 
       me.onElDblClick(e, t); 
      } 

      function handleElClick(me, e, t) { 
       var ownerHeaderCt = me.getOwnerHeaderCt(); 
       if (ownerHeaderCt && !ownerHeaderCt.ddLock) { 
        // Firefox doesn't check the current target in a within check. 
        // Therefore we check the target directly and then within (ancestors) 
        if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) { 
         ownerHeaderCt.onHeaderTriggerClick(me, e, t); 
        // if its not on the left hand edge, sort 
        } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) { 
         me.toggleSortState(); 
         ownerHeaderCt.onHeaderClick(me, e, t); 
        } 
       } 
      } 
     } 
    }); 

더블 클릭 체크 내가 여기 https://stackoverflow.com/a/16033129/3436982 발견 개조 버전입니다.