ExtJS4가 그리드 열 표시 및 숨기기를 제어하는 checkbox_extjs를 자동으로 생성하는 방법-JS 튜토리얼-php.cn

ExtJS4가 그리드 열 표시 및 숨기기를 제어하는 checkbox_extjs를 자동으로 생성하는 방법

WBOY

풀어 주다： 2016-05-16 16:50:24

원래의

1070명이 탐색했습니다.

어떤 이유에서인지 그리드 열 표시를 제어하는 체크박스 그룹을 만들어야 합니다. EXTJS4의 그리드 패널에는 열 표시 및 숨기기를 제어할 수 있는 목록이 제공되지만 그런 요구가 있습니다(한번에 명확해야 함). 한눈에)

아래 사진은

ExtJS4가 그리드 열 표시 및 숨기기를 제어하는 checkbox_extjs를 자동으로 생성하는 방법

며칠 전 작업에 이어 오늘 오전에 커스텀 필드를 완성해 봤습니다. 위의 일반 쿼리 또는 고급 쿼리가 완료된 후 해당 열의 필드와 열을 가져오고 이를 처리 함수인 makeCustomMadePanel에 전달합니다. 이 함수는 확인란 그룹을 생성하는 데 사용됩니다. 원래는 체크박스에 check와 비슷한 이벤트가 있을 줄 알았는데, API를 보니 MD 사용 이벤트만 있는 것 같습니다. .

아래에 제가 작성한 makeCustomMadePanel 함수를 게시하세요. . 그리드의 열을 기준으로 체크박스 그룹을 자동으로 생성하는 데 사용됩니다. (전체 그리드의 헤더 내용 및 기타 정보는 백그라운드에서 가져옵니다. 백그라운드에서 어떤 테이블이 전송되더라도 체크박스 그룹을 생성하여 숨김 및 열 표시)

매개변수 재구성 중 그리드 패널에서 사용하는 필드 및 열입니다. 키는 마침표의 var t=grid_a.columnManager.headerCt.items.get(th.itemId)입니다. . 이 문장은 Grid_a의 컬럼 정보를 얻는 데 사용됩니다. . api에서는 찾을 수 없는 것 같습니다. 온라인에서 여러 가지 방법을 찾았지만 그 중 어느 것도 적합하지 않았습니다. 각 열에 ID를 부여하고 싶지 않습니다. 이것은 stackoverflow.com/에서 발견되었습니다. . http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

코드 복사 코드는 다음과 같습니다.

 
function makeCustomMadePanel(fields,cl) 
{ 

var x=cusMadePanel.getComponent ('맞춤' );//console.log(cusMadePanel.getComponent('맞춤')) 
for(var i=0;i{ 
 x.add( 
{ 
xtype : 'checkboxfield', 
boxLabel : cl[i].header, 
inputValue : fields[i].name, 
checked:true, 
itemId:i , 
name : 'custom', 
listeners : { 
change : function(th, value, oldValue,eop) { 

var t=grid_a.columnManager.headerCt .items.get (th.itemId); 
if(t.isVisible()){ 

t.setVisible(false) 
} 
else{ 
t.setVisible (참) 
//grid_a.columns[3].setVisible(false) 
}} 

} 
} 
} 

 
customMadePanel 

코드를 복사한 후 코드는 다음과 같습니다. Ext.define ('customMadePanel', {

extend : 'Ext.form.Panel',

title : 'custom field', 
collapsible : true, 
items : [ { 
itemId:'custom', 

xtype : 'checkboxgroup', 

fieldLabel : '필드 선택', 
columns : 6, 
items : [] 


 }] 
//collapsed:true, 
}); 
var cusMadePanel=new customMadePanel(); 

 
내 접근 방식의 단점은 다음과 같습니다. 또한 makeCustomMadePanel 함수에서 체크박스 구성 요소를 생성하는 루프는 시간이 너무 많이 걸리고 구성 요소 38개에 대해 몇 초가 걸립니다. . 사용자 경험은 확실히 좋지 않습니다. . 

현재는 각 쿼리 이후의 쿼리 결과를 기반으로 생성됩니다. . . 좋은 해결책을 다시 생각해보겠습니다

오늘 makeCustomMadePanel을 최적화했는데, 이전에 비해 컴포넌트 생성 속도가 대폭 향상되었습니다!

코드 복사 코드는 다음과 같습니다. function makeCustomMadePanel(fields,cl)

cusMade=1; 
var x=cusMadePanel.getComponent('custom'); 
//console.log(cusMadePanel.getComponent('custom')); ; 
for(var i=0;i{ 
//x.add( 
var temp= 
{ 
xtype : 'checkboxfield' , 
boxLabel : cl[i].header, 
//inputValue : fields[i].name, 
checked:true, 
itemId:i, 
name : 'custom', 
 리스너 : { 
change : function(th, value, oldValue,eop) { 

var t=grid_a.columnManager.headerCt.items.get(th.itemId) 
/ /console.log(t.isVisible()); 
//console.log('break') 
if(t.isVisible()){ 

t.setVisible(false) ; 
} 
else{ 
t.setVisible(true); 
} 
//console.log(t.isVisible());//var t1=grid_a. columnManager.headerCt .items.get(th.itemId); 
//console.log(t1); 
//grid_a.columns[3].setVisible(false) 
}} 
 }; 
//console.log(temp); 
fie.push(temp) 
} 
//console.log(fie); fie); 

 
루프에서 생성해야 하는 구성 요소 개체를 먼저 조립한 다음 각 추가 비용이 매우 높고 속도가 정말 빠릅니다. 많이 좋아졌어요~