EXTJS 5 - حقل العلامة أو مربع التحرير والسرد - إظهار وإخفاء حقول النموذج

Question

أرغب في إظهار الحقول وإخفائها ديناميكيًا في نموذج وفقًا للعناصر المحددة في مربع تحرير وسرد متعدد التحديد (حقل علامة).

يحتوي كل عنصر محدد في مربع التحرير والسرد على العديد من حقول النماذج المخفية المرتبطة به (التي سيتم عرضها).

الحقول لها الخاصية "مخفي: صحيح"؛

يمكنني إظهار الحقول، لكن لا يمكنني إخفاءها عندما أحذف العناصر من حقل combobox أو حقل العلامات.

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;  
        } 
    }
  }
} 

يقول Firebug:

خطأ مطبعي:الحقول.setVisible ليست وظيفة

هل يمكنك المساعدة بمزيد من الاقتراحات من فضلك.

ميرسي.

Answer 1

في الواقع، التعليمات البرمجية الخاصة بك بها عيب منطقي.لقد جعلت كل الحقول مرئية، ولكن عندما تقوم بإزالة العلامة الثالثة، ماذا يحدث؟يمكنك تكرار العلامات المحددة حاليًا في التحرير والسرد، وكما تظهرها، فقد قمت بذلك ["itemone", "itemtwo"], ، لا يوجد "itemthree" هناك.لذا، فإن الحالة الأخيرة التي يمكن أن تخفي الحقل الثالث هي الملاحظة المنفذة.وهكذا بالنسبة للعلامة الثانية والأولى.

ما سأفعله بدلاً من ذلك هو التكرار خلال كل حقل، وإظهاره إذا تم تحديد العلامة وإخفائه إذا لم يكن كذلك.يمكنك استخدام 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 );

هاهو.نلهو مع تحويلة!