عرض القيم المقترحة من Combobox ext إلى عنصر في DOM

Question

لدي مربع تحرير وسرد تحويلي يستخدم متجرًا لاقتراح قيم للمستخدم أثناء الكتابة.

مثال على ذلك يمكن العثور عليه هنا: مثال على مربع التحرير والسرد

هل هناك طريقة لجعلها كذلك قائمة النص المقترحة يتم تقديمه إلى عنصر في DOM.يرجى ملاحظة أنني لا أقصد خيار التكوين "applyTo"، لأن هذا من شأنه أن يعرض التحكم بالكامل، بما في ذلك مربع النص إلى عنصر DOM.

Answer 1

يمكنك استخدام مكون إضافي لهذا، حيث يمكنك الاتصال بالطرق الخاصة أو حتى تجاوزها من داخل المكون الإضافي:

var suggested_text_plugin = {

    init: function(o) {

        o.onTypeAhead = function() {
            // Original code from the sources goes here:

            if(this.store.getCount() > 0){
                var r = this.store.getAt(0);
                var newValue = r.data[this.displayField];
                var len = newValue.length;
                var selStart = this.getRawValue().length;
                if(selStart != len){
                    this.setRawValue(newValue);
                    this.selectText(selStart, newValue.length);
                }
            }

         // Your code to display newValue in DOM
         ......myDom.getEl().update(newValue);
        };
    }
};


// in combobox code:

var cb = new Ext.form.ComboBox({
    ....
    plugins: suggested_text_plugin,
    ....
});

أعتقد أنه من الممكن إنشاء سلسلة كاملة من الأساليب، واستدعاء الطريقة الأصلية قبل أو بعد أسلوبك، لكنني لم أجرب هذا بعد.

أيضًا، من فضلك لا تدفعني بشدة لاستخدام تعريف البرنامج المساعد غير القياسي ومنهجيات الاستدعاء (غير موثقة).إنها مجرد طريقتي في رؤية الأشياء.

يحرر:

أعتقد أنه يمكن تنفيذ سلسلة الطريقة بشيء من هذا القبيل (لم يتم اختباره):

....
o.origTypeAhead = new Function(this.onTypeAhead.toSource());
// or just
o.origTypeAhead = this.onTypeAhead;
....

o.onTypeAhead = function() {
    // Call original
    this.origTypeAhead();
    // Display value into your DOM element
    ...myDom....
};

Answer 2

@qui

شيء آخر يجب مراعاته هو أن initList ليس جزءًا من واجهة برمجة التطبيقات (API).قد تختفي هذه الطريقة أو قد يتغير السلوك بشكل ملحوظ في الإصدارات المستقبلية من Ext.إذا لم تكن تخطط أبدًا للترقية، فلا داعي للقلق.

Answer 3

لذا وضح أنك تريد عرض النص المحدد في مكان ما بجانب إدخال النص مباشرةً.صحيح؟

ComboBox هو مجرد مركب من Ext.DataView, وإدخال النص وزر التشغيل الاختياري.لا يوجد خيار رسمي لما تريد، وسيكون اختراقه لجعله يفعل ما تريد أمرًا مؤلمًا حقًا.لذا، فإن أسهل مسار للعمل (بخلاف البحث عن مكتبة أخرى واستخدامها مع مكون يفعل ما تريده بالضبط) هو إنشاء مكتبتك الخاصة باستخدام المكونات المذكورة أعلاه:

1. قم بإنشاء مربع نص.يمكنك استخدام Ext.form.TextField إذا كنت تريد، ومراقبة حدث keyup.
2. قم بإنشاء DataView مرتبطًا بمتجرك، وعرضه على أي عنصر DOM تريده.اعتمادًا على ما تريده، استمع إلى حدث "selectionchange" واتخذ أي إجراء تحتاجه ردًا على التحديد.على سبيل المثال، setValue على Ext.form.Hidden (أو عنصر إدخال HTML العادي = "hidden").
3. في مستمع حدث keyup الخاص بك، اتصل بطريقة تصفية المتجر (انظر وثيقة)، وتمرير اسم الحقل والقيمة من حقل النص.على سبيل المثال، store.filter('name',new RegEx(value+'.*'))

إنه عمل أكثر قليلًا، لكنه أقصر بكثير من كتابة المكون الخاص بك من الصفر أو اختراق ComboBox لتتصرف كما تريد.

Answer 4

@Thevs

أعتقد أنك كنت على الطريق الصحيح.

ما فعلته هو تجاوز طريقة initList الخاصة بـ Combobox.

    Ext.override(Ext.form.ComboBox, {
    initList : function(){

إذا نظرت إلى الكود، يمكنك رؤية الجزء الذي يعرض قائمة الاقتراحات في عرض البيانات.لذلك فقط قم بتعيين التطبيق على عنصر dom الذي تريده:

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",

Answer 5

@qui

نعم.اعتقدت أنك تريد حقل DOM إضافيًا (بالإضافة إلى حقل التحرير والسرد الموجود).

ولكن الحل الخاص بك من شأنه أن يتجاوز طريقة في فئة ComboBox، أليس كذلك؟قد يؤدي ذلك إلى عرض جميع مربعات التحرير والسرد الخاصة بك على نفس DOM.سيؤدي استخدام البرنامج الإضافي إلى تجاوز حالة واحدة معينة فقط.