extjs 그리드 열 머리글 단어 감싸기가 작동하지 않습니다

내 extjs6 그리드에서 공간에 맞지 않는 열 머리글이 있습니다. 열 머리글에서만 단어 줄 바꿈을 수행하려면 어떻게해야합니까? 이것은 내가 시도한 것이며 작동하지 않습니다.extjs 그리드 열 머리글 단어 감싸기가 작동하지 않습니다

      xtype: 'grid', 
         title: 'Daily Performance', 
         itemId: 'performanceAccountDailyGridID', 
         bind: { 
          store: '{myDailyPerformanceAccountStore}' 
         },        
         margin: '10px 0px 10px 0px', 
         ui: 'featuredpanel-framed', 
         cls: 'custom-gridPerformance', 
         height: 400, 
         width: 800, 
         columns: [ 
          { 
           header: 'Filedate', 
           dataIndex: 'filedate', 
           flex: 1 
          },

.custom-gridPerformance .x-column-header-inner .x-column-header-text { 
white-space: normal; 
}

출처

2017-04-20 solarissf

'X-열 헤더 {', 아무것도 일치하지 않을 것 .custom-gridPerformance 오타이다? –

오타가 아닙니다. 헤더를 편집하는 데 사용할 올바른 형식이 확실하지 않습니다. 그것은 무엇이어야 하는가? – solarissf

'x-column-header' 접두사가'.' 접두어가 아니기 때문에 클래스 이름과 일치하지 않습니다. 태그 이름이' '인 태그와 일치 시키려고합니다. –

당신 CSS 선택기가 white-space: normal 충분주는 열 머리글 text.Just을 포함 .x-column-header-text까지 중첩되어야한다 CSS. 그래서 CSS는 다음과 같아야합니다

.custom-gridPerformance .x-column-header-inner .x-column-header-text { 
    white-space: normal; 
}

작업 예 :

var store = Ext.create('Ext.data.Store', { 
 
    fields: ['name', 'email', 'region'], 
 
    data: [{ 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     region: 'Arizona' 
 
    }, { 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     region: 'Alaska' 
 
    }, { 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     region: 'Alaska' 
 
    }, { 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     region: 'Alabama' 
 
    }] 
 
}); 
 

 
Ext.create('Ext.grid.Panel', { 
 
    store: store, 
 
    width: 400, 
 
     cls: 'custom-gridPerformance', 
 
    renderTo: Ext.getBody(), 
 
    
 
    columns: [{ 
 
     text: 'Name of zoro of life style', 
 
     dataIndex: 'name', 
 

 
    }, { 
 
     text: 'Email', 
 
     dataIndex: 'email', 
 
     flex: 1, 
 

 
    }, { 
 
     text: 'State', 
 
     dataIndex: 'region', 
 
     
 
    }], 
 
    
 

 
});

.custom-gridPerformance .x-column-header-inner .x-column-header-text { 
 
    white-space: normal; 
 
}

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

출처

2017-04-21 08:27:44

매우 이상한데 코드 스 니펫을 실행할 때 코드 스 니펫이 제대로 작동하는 것을 볼 수 있지만 코드에 넣을 때 여전히 작동하지 않습니다. 나는 당신의 CSS를 반영하기 위해 내 게시물과 코드를 변경했다. – solarissf

사용중인 버전 및 테마는 무엇입니까? –

extjs6 "toolkit": "classic", /** *이 응용 프로그램의 테마 이름. */ "theme": "myCustomTheme", // "theme": "theme-triton", – solarissf

extjs 그리드 열 머리글 단어 감싸기가 작동하지 않습니다

답변

관련 문제