javascript - ExtJS कॉम्बोबॉक्स ट्रिगरएक्शन क्या करता है:"सब" वास्तव में करते हैं?




combobox (2)

किसी आइटम को चुनने के बाद, सूची को वर्तमान टेक्स्ट मान से मेल खाने के लिए फ़िल्टर किया जाता है। आपके मामले में, यह हमेशा चयनित मूल्य है, लेकिन बहु-वर्ण मानों के साथ अधिक स्पष्ट है (Ext में राज्य नाम उदाहरण देखें)। यदि आप चयनित मान हटाते हैं, तो ड्रॉपडाउन सभी मान रखने के लिए वापस जायेगा। triggerAction:'all' अर्थ फ़िल्टर नहीं होता है, हमेशा सभी मान दिखाएं।

मैंने एक सरल कॉम्बोबॉक्स बनाने की कोशिश की:

var combo1 = new Ext.form.ComboBox({
  store: [1,2,3],
  renderTo: document.body
});

लेकिन इस तरह लिखा है कि यह अजीब तरीके से कार्य करता है:

  • जब आप पहली बार ड्रॉपडाउन खोलते हैं, तो यह तीन विकल्प प्रदान करता है।
  • आप एक चुनते हैं।
  • लेकिन जब आप अपने चयन को बदलने की कोशिश करते हैं, तो ड्रॉपडाउन केवल एक विकल्प प्रदान करता है - जिसे आपने पहले चुना था।

मैंने अपने कोड को एक्सटी होमपेज पर samples से तुलना की और पाया कि triggerAction: "all" जोड़ना triggerAction: "all" मेरी समस्या हल करता है:

var combo2 = new Ext.form.ComboBox({
  triggerAction: "all",
  store: [1,2,3],
  renderTo: document.body
});

ट्रिगरएक्शन के लिए ExtJS दस्तावेज़ मुझे बहुत कुछ नहीं बताता है:

ट्रिगर पर क्लिक होने पर निष्पादित करने की क्रिया। AllQuery कॉन्फ़िगरेशन विकल्प द्वारा निर्दिष्ट क्वेरी को चलाने के लिए 'सभी' का उपयोग करें ('क्वेरी' पर डिफ़ॉल्ट)

मैंने allQuery विकल्प निर्दिष्ट नहीं किया है। असल में, मैं सर्वर पर एक क्वेरी नहीं करना चाहता हूं।

तो यह triggerAction वास्तव में क्या करता है?

और यह वास्तव में "all" सेट कर रहा है, जब मुझे बस एक साधारण स्थैतिक combobox चाहिए तो मुझे क्या करना चाहिए?


0) दो अलग-अलग चीजों को "प्रोटोटाइप" कहा जा सकता है:

  • प्रोटोटाइप संपत्ति, obj.prototype में के रूप में

  • प्रोटोटाइप आंतरिक संपत्ति, ईएस 5 में [[Prototype]] रूप में दर्शाया गया है।

    इसे Object.getPrototypeOf() माध्यम से पुनर्प्राप्त किया जा सकता है।

    फ़ायरफ़ॉक्स इसे __proto__ प्रॉपर्टी के माध्यम से विस्तार के रूप में सुलभ बनाता है। ES6 अब __proto__ लिए कुछ वैकल्पिक आवश्यकताओं का उल्लेख करता है

1) प्रश्नों का उत्तर देने के लिए उन अवधारणाएं मौजूद हैं:

जब मैं obj.property करता obj.property , जेएस कहां obj.property है। obj.property ?

सहजता से, शास्त्रीय विरासत संपत्ति लुकअप को प्रभावित करना चाहिए।

2)

  • __proto__ डॉट के लिए प्रयोग किया जाता है . obj.property में संपत्ति लुकअप के रूप में।
  • .prototype का उपयोग सीधे लुकअप के लिए नहीं किया जाता है, केवल अप्रत्यक्ष रूप से क्योंकि यह ऑब्जेक्ट सृजन पर __proto__ को new साथ निर्धारित करता है।

लुकअप ऑर्डर है:

  • obj गुण obj.p = ... या Object.defineProperty(obj, ...) साथ जोड़ा गया
  • obj.__proto__ गुण
  • obj.__proto__.__proto__ , और इसी तरह
  • अगर कुछ __proto__ null , तो undefined वापसी।

यह तथाकथित प्रोटोटाइप श्रृंखला है

आप से बच सकते हैं . obj.hasOwnProperty('key') और Object.getOwnPropertyNames(f) साथ लुकअप

3) obj.__proto__ सेट करने के दो मुख्य तरीके हैं obj.__proto__ :

  • new :

    var F = function() {}
    var f = new F()
    

    तो new सेट है:

    f.__proto__ === F.prototype
    

    यह वह जगह है जहां .prototype उपयोग किया जाता है।

  • Object.create :

     f = Object.create(proto)
    

    सेट:

    f.__proto__ === proto
    

4) कोड:

var F = function() {}
var f = new F()

निम्नलिखित आरेख के अनुरूप है:

(Function)       (  F  )                                      (f)
 |  ^             | | ^                                        |
 |  |             | | |                                        |
 |  |             | | +-------------------------+              |
 |  |constructor  | |                           |              |
 |  |             | +--------------+            |              |
 |  |             |                |            |              |
 |  |             |                |            |              |
 |[[Prototype]]   |[[Prototype]]   |prototype   |constructor   |[[Prototype]]
 |  |             |                |            |              |
 |  |             |                |            |              |
 |  |             |                | +----------+              |
 |  |             |                | |                         |
 |  |             |                | | +-----------------------+
 |  |             |                | | |
 v  |             v                v | v
(Function.prototype)              (F.prototype)
 |                                 |
 |                                 |
 |[[Prototype]]                    |[[Prototype]]
 |                                 |
 |                                 |
 | +-------------------------------+
 | |
 v v
(Object.prototype)
 | | ^
 | | |
 | | +---------------------------+
 | |                             |
 | +--------------+              |
 |                |              |
 |                |              |
 |[[Prototype]]   |constructor   |prototype
 |                |              |
 |                |              |
 |                | -------------+
 |                | |
 v                v |
(null)           (Object)

यह चित्र कई भाषा पूर्वनिर्धारित ऑब्जेक्ट नोड्स दिखाता है: null , Object , Object , Function और Object.prototype । कोड की हमारी 2 लाइनों ने केवल f , F और FF.prototype

5)। .constructor आमतौर पर .constructor से आता है . देखो:

f.constructor === F
!f.hasOwnProperty('constructor')
Object.getPrototypeOf(f) === F.prototype
F.prototype.hasOwnProperty('constructor')
F.prototype.constructor === f.constructor

जब हम f.constructor , जावास्क्रिप्ट करता है . के रूप में देखो:

  • f नहीं है। .constructor
  • f.__proto__ === F.prototype में .constructor === F , इसलिए इसे लें

नतीजा f.constructor == F सहजता से सही है, क्योंकि F का निर्माण F लिए किया जाता है, उदाहरण के लिए सेट फ़ील्ड, क्लासिक ओओपी भाषाओं की तरह।

6) शास्त्रीय विरासत वाक्यविन्यास प्रोटोटाइप श्रृंखला में हेरफेर करके हासिल किया जा सकता है।

ES6 class जोड़ता है और कीवर्ड extends है, जो पहले संभव प्रोटोटाइप हेरफेर पागलपन के लिए सिंटैक्स चीनी है।

class C {
    constructor(i) {
        this.i = i
    }
    inc() {
        return this.i + 1
    }
}

class D extends C {
    constructor(i) {
        super(i)
    }
    inc2() {
        return this.i + 2
    }
}
// Inheritance syntax works as expected.
(new C(1)).inc() === 2
(new D(1)).inc() === 2
(new D(1)).inc2() === 3
// "Classes" are just function objects.
C.constructor === Function
C.__proto__ === Function.prototype
D.constructor === Function
// D is a function "indirectly" through the chain.
D.__proto__ === C
D.__proto__.__proto__ === Function.prototype
// "extends" sets up the prototype chain so that base class
// lookups will work as expected
var d = new D(1)
d.__proto__ === D.prototype
D.prototype.__proto__ === C.prototype
// This is what `d.inc` actually does.
d.__proto__.__proto__.inc === C.prototype.inc
// Class variables
// No ES6 syntax sugar apparently:
// http://.com/questions/22528967/es6-class-variable-alternatives
C.c = 1
C.c === 1
// Because `D.__proto__ === C`.
D.c === 1
// Nothing makes this work.
d.c === undefined

सभी पूर्वनिर्धारित वस्तुओं के बिना सरलीकृत आरेख:

      __proto__
(C)<---------------(D)         (d)
| |                |           |
| |                |           |
| |prototype       |prototype  |__proto__
| |                |           |
| |                |           |
| |                | +---------+
| |                | |
| |                | |
| |                v v
|__proto__        (D.prototype)
| |                |
| |                |
| |                |__proto__
| |                |
| |                |
| | +--------------+
| | |
| | |
| v v
| (C.prototype)--->(inc)
|
v
Function.prototype




javascript combobox extjs