Blog webdeveloperski Patryk yarpo Jar

Rozwijanie listy po kliknięciu na dijit.form.FilteringSelect / ComboBox

Autor wiadomości Sierpień 22, 2012

W Dojo Toolkit jest cały zestaw widgetów pozwalających budować bardzo nowoczesne aplikacje webowe. W ty wpisie zajmę się dwoma (spokrewnionymi) kontrolkami:

  • dijit.form.FilteringSelect
  • dijit.form.ComboBox

autouzupełnianie dijit.form.FilteringSelect

Co one robią?

Co z nimi nie tak, skoro mam zamiar im poświęcić cały wpis? Kolejno - są to komponenty zastępujące zwykły HTML-owy znacznik <select />. Są bardzo przyjazne dla oka, pozwalają nie tylko na wybór pozycji z listy dostępnych, ale także na wpisywanie własnych (mechanizm podpowiedzi), dodatkowo bardzo dobrze współdziałają z data store. Słowem - używać, nie umierać ;).

Jednak posiadają jedną dużą wadę funkcjonalną - aby rozwinąć listę trzeba kliknąć dokładnie,tylko i wyłącznie w strzałeczkę sugerującą rozwijanie.

demo online

I właśnie o tym niezbyt user-friendly rozwiązaniu chciałbym tu napisać. Aż sam się dziwię, dlaczego nie jest to naturalne zachowanie tego widgetu (lub dlaczego nie ma odpowiedniej flagi w konstruktorze). Skoro znacznik <select /> po kliknięciu na dowolny fragment pozwalał nam wybrać pozycję z listy, dlaczego twórczy Dojo zrezygnowali z tak przydatnej funkcjonalności?

Nie wiem. To widocznie pozostanie już tajemnicą 🙂

Rozwiązanie

Aby przekonać widget do odpowiedniego działania należy podpiąć się pod zdarzenie `onClick' obiektu `diji.form.FilteringSelect' (lub `ComboBox' - działa identycznie dla obu):

dojo.connect(select, 'onClick', function()
{
    this.loadDropDown();
});

demo online

Warto pamiętać, że:

  • wewnątrz funkcji anonimowej przekazanej jako 3-ci parametr `this' wskazuje na widget.
  • "onClick" jest jedyną słuszną nazwą, jaka może być wpisana. "onClick" jest metodą obiektu Dojo, a nie nazwą zdarzenia DOM (choć poniekąd jest wywoływana właśnie na to zdarzenie i na kilka innych).

Aby dowiedzieć się, co dokładnie robi metoda `loadDropDown' należałoby prześledzić kod w SVN. W dokumentacji jest jedynie napisane, że jest to metoda, przyjmująca opcjonalny parametr - callback 🙂

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.