extjs 5 - tagfieldまたはcombobox - フォームフィールドの表示と非表示
-
21-12-2019 - |
質問
マルチ選択コンボボックス(TagField)で選択した項目に従って、フィールドを動的に表示して非表示にしたいです。
コンボボックスで選択された各項目には、(表示する)
がいくつかの関連隠しフォームフィールドがあります。フィールドには "hidden:true";
があります。フィールドを表示できますが、ComboBoxフィールドまたはde tagfieldからアイテムを削除すると、隠すことはできません。
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(レコード)次の結果を提供します。
ショー:
["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;
}
}
}
}
.
Firebugは言う:
typeError:fields.setVisibleは関数ではありません
あなたはより多くの提案を手伝ってください、してください。
Merci。
解決
確かに、あなたのコードは論理的な欠陥を持っています。あなたはすべてのフィールドを見えるようにしますが、あなたがそれから3番目のタグを削除するとき、何が起こるのですか?あなたはコンボの現在選択されているタグをループし、それを表示するように、そこに["itemone", "itemtwo"]
、 "itemthree"を持っています。したがって、最後のケースは、3RDフィールドを非表示にすることができるものが実行されます。そして、2番目と最初のタグのために。
代わりに各フィールドをループするのは、タグが選択されている場合はそれを表示し、それを非表示にしていない場合は表示します。たとえば、Tagが選択されているかどうかをテストするには、records.indexOf('itemone') !== -1
を使用できます。
もう1つのヒントでは、フィールドの独特の名前を持つカスタムプロパティを使用し、両方ともコンポーネントクエリを簡素化し、選択したものに対してテストするタグを考え出すことができます。
これは私が意味することです...あなたがこのようにあなたのフィールドを定義した場合:
{
xtype: 'textfield'
,autoHideTag: 'itemone' // custom marker
}
.
すべてのフィールドを1つのクエリに入れることができます。
// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');
.
あなたが望むなら、該当する場合は「TextField [AutoHidetag] "や"フィールド[AutoHidetag] "のようなものをより具体的にすることができます。
と最後に、このフィールドのテストするタグを知っているでしょう:
// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );
.
Voilà。 ext!
を楽しんでください