EXTJS 5 - 태그 필드 또는 콤보 상자 - 양식 필드 표시 및 숨기기
-
21-12-2019 - |
문제
다중 선택 콤보 상자(태그 필드)에서 선택한 항목에 따라 양식의 필드를 동적으로 표시하고 숨기고 싶습니다.
콤보 상자에서 선택한 각 항목에는 여러 개의 연관된 숨겨진 양식 필드(표시됨)가 있습니다.
필드에는 "hidden:true" 속성이 있습니다.
필드를 표시할 수 있지만 콤보박스 필드나 태그 필드에서 항목을 삭제할 때 숨길 수는 없습니다.
listeners:{
select:function( combo, records, eOpts) {
var combo = Ext.ComponentQuery.query('#combo')[0];
var field = Ext.ComponentQuery.query('#A')[0];
var field1 =Ext.ComponentQuery.query('#B')[0];
var field2 =Ext.ComponentQuery.query('#C')[0];
var records = combo.getValue();
console.log(records);
for (var i = 0, count = records.length; i < count; i++) {
switch(records[i]) {
case 'itemone':
if(field.isHidden()) {
field.show();
}
else {
field.hide();
}
break;
case 'itemtwo':
if(field1.isHidden()) {
field1.show();
}
else {
field1.hide();
}
break;
case 'itemthree':
if(field2.isHidden()) {
field2.show();
}
else {
field2.hide();
}
break;
}
}
}
}
console.log(records)는 다음 결과를 제공합니다.
보여주다:
["itemone"]
["itemone", "itemtwo" ]
["itemone", "itemtwo", "itemthree"]
숨다:
["itemone", "itemtwo"]
["itemone"]
코드를 수정하기 위한 제안을 제공해 주실 수 있나요?
메모:이전에 잘못된 위치에 다음 게시물을 올려서 죄송합니다
귀하의 제안을 구현하려고 시도했지만 성공하지 못했습니다(초보자의 어려움).
내 코드:
listeners:{
select:function( combo, records, eOpts) {
var combo = Ext.ComponentQuery.query('#combo')[0];
var fields = Ext.ComponentQuery.query('[autoHideTag]');
var records = combo.getValue();
console.log(records);
for (var i = 0, count = records.length; i < count; i++) {
fields.setVisible(records.indexOf(fields.autoHideTag) !== -1 );
switch(records[i]) {
case 'itemone':
if(field.isHidden()) {
field.show();
}
else {
field.hide();
}
break;
case 'itemtwo':
if(field1.isHidden()) {
field1.show();
}
else {
field1.hide();
}
break;
case 'itemthree':
if(field2.isHidden()) {
field2.show();
}
else {
field2.hide();
}
break;
}
}
}
}
방화범은 이렇게 말합니다.
유형오류:fields.setVisible은 함수가 아닙니다.
더 많은 제안을 도와주실 수 있나요?
머시.
해결책
실제로 귀하의 코드에는 논리적 결함이 있습니다.모든 필드를 표시한 후 세 번째 태그를 제거하면 어떻게 되나요?콤보에서 현재 선택한 태그를 반복하고 표시하면 다음과 같은 결과가 나타납니다. ["itemone", "itemtwo"]
, 거기에는 "item three"가 없습니다.따라서 마지막 경우인 세 번째 필드를 숨길 수 있는 경우는 메모가 실행됩니다.두 번째와 첫 번째 태그에도 마찬가지입니다.
대신 내가 할 일은 각 필드를 반복하면서 태그가 선택되면 표시하고 그렇지 않으면 숨기는 것입니다.당신이 사용할 수있는 records.indexOf('itemone') !== -1
예를 들어 태그가 선택되었는지 테스트합니다.
또 다른 팁은 필드에 고유한 이름이 있는 사용자 정의 속성을 사용하여 구성 요소 쿼리를 단순화하고 선택한 항목에 대해 테스트할 태그를 아무 생각 없이 알 수 있다는 것입니다.
내 말은 이렇습니다...필드를 이런 방식으로 정의하는 경우:
{
xtype: 'textfield'
,autoHideTag: 'itemone' // custom marker
}
하나의 쿼리로 모든 필드를 가져올 수 있습니다.
// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');
원하는 경우 "textfield[autoHideTag]" 또는 "field[autoHideTag]"와 같이 쿼리를 보다 구체적으로 만들 수 있습니다.
그리고 마지막으로 이 필드를 테스트할 태그를 알게 됩니다.
// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );
짜잔.Ext와 함께 즐거운 시간 보내세요!