Sencha Ext JS5용 부품 열

2396 단어 ExtJSSencha
Sencha Advent Calendar 2014 12일차
http://www.adventar.org/calendars/490
부품 열 작업
안녕하십니까, xenophy의 간정입니다.
Ext JS5에서 추가된 소거리 시퀀스를 사용하여
구성 요소를 격자 열에 간단하게 넣을 수 있습니다.
이번에는 그 소거리 서열에 조립품을 넣어서 운행하려고 한다.
부품 열 정보
부품 열은 처음부터 내부에 있습니다.
준비된 어셈블리 및 부품을 지정하여
열에 어셈블리를 표시할 수 있습니다:.
이번에 우리는 조합 상자를 소정 서열에 놓을 것이다. 메쉬 작성 부품 열을 삽입하기 전에 일반 열만 있는 메쉬 만들기:. Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), "출석 이벤트", width: 600, columns: [{ text: 사용자, dataIndex: 'user', width: 150 }, { text:'참가 상황', dataIndex: 'attendCd', width: 150 }], store: { fields: [{ name: 'user', type: 'string' }, { name: 'attendCd', type: 'int' }], data: [ {user: 'user1', attendCd: 0}, {user: 'user2', attendCd: 0}, {user: 'user3', attendCd: 1}, {user: 'user4', attendCd: 2} ] } }); 참가 상황 표시줄에 상태 표시 상태 값에 따라 디스플레이를 바꾸기 위해 조합을 삽입합니다. 부품 열 설정 참가 상황란의 설정은 다음과 같다. { text:'참가 상황', dataIndex: 'attendCd', width: 150 } ↓ 먼저 xype에 "widgetcolumn" 설정을 추가합니다.xtype을 지정하지 않을 때 기본'gridcolumn' 다음은widget 설정에 대한 구성 요소 (또는 위젯) 를 지정합니다. 이번에는 콤보박스를 표시하기 위해 xype에'컴보박스'를 지정해 점포와 육상 경기장 설정을 하고 있다. { text:'참가 상황', dataIndex: 'attendCd', width: 150, xtype: 'widgetcolumn', widget: { xtype: 'combobox', store: { fields: [{ name: 'cd', type: 'int' }, { name: 'name', type: 'string' }], data : [ {cd:0,name:'출석'}, {cd:1,name:'결석'}, {cd:2,name:'결원 보완'} ] }, valueField: 'cd', displayField: 'name', queryMode: 'local' } } 부품 열의 설정은 여기서 끝냅니다. 이렇게 "widgetcolumn"에 대한widget 설정 폼에 구성 요소를 간단하게 설정할 수 있습니다. 결과는 다음과 같습니다. 최후 소규모 시퀀스를 통해 격자에 있는 구성 요소와 위젯을 쉽게 처리할 수 있습니다 부품 및 부품 자체 사용자 지정 포함 나는 그물의 표현과 행동이 이전보다 더욱 풍부해졌다고 생각한다.

좋은 웹페이지 즐겨찾기