W ExtJS stawiam pierwsze kroki i niedawno w wersji 2.3 trafiłem na spory kłopot. Nie wiem, czy występuje on w nowszych wersjach nadal, ale w dwójce spędziłem trochę czasu zanim zaczął współpracować.

Problem polega na tym, że gdy w Gridzie chcesz użyć comboboxa to ten combobox ustawia w POST wartość ‘value’ (czyli nazwa elementu) zamiast ‘id’. Co czasem zmusza nas do ustawienia tej samej wartości dla ‘value’ i ‘id’ co nie zawsze jest zgodne z tym, co potrzebujemy.

Jednym z rozwiązań z jakimi się spotkałem jest dołożenie drugiego, ukrytego pola które faktycznie przechowuje i ustawia odpowiednią wartość POST, a widoczny combobox w zdarzeniu ‘change’ podmienia wartości w tym ukrytym.

Znalazłem jeszcze jeden sposób, ciut bardziej zgrabny, polegający na definiowaniu funkcji renderer:

                            ,renderer: function (val, metaData, record) {
                                /**
                                 * workaround for combobox in grid problem - gpawlik
                                 * note: store should have loaded data for it to work
                                 * (it is possible just to attach this behavior to store on-load event)
                                 */
                                var store = Ext.StoreMgr.get("oli.form.combo_booking_pax_status_store");

                                if(store.find("id", val) >=0) {
                                    record.set("fpax_status", val);//*
                                    return store.getAt( store.find("id", val) ).data.value;//**
                                }
                                record.set("fpax_status", store.getAt( store.find("value", val) ).data.id);//*
                                return val;//**

                            }

Dwie linie oznaczone ** odpowiadają za to, aby combobox zawsze wyświetlił opisową nazwę pola (w moim przypadku było tak, że przy pierwszym wyświetleniu wartością ‘val’ był ID z bazy, z kolei po kliknięciu i wybraniu jednej z opcji ‘val’ było już nazwą opisową).

Linie oznaczone * sprawiają, że POSTem wysyłana jest odpowiednia wartość. Danemu wierszowi (record) w gridzie ustawiają zawsze wartość id z bazy.

Znalazłem ostatnio ciekawy plugin do jQuery – Waypoints. Dzięki niemu możemy podpiąć się pod takie zdarzenia jak pojawienie się danego elementu w widocznej części przeglądarki.

Wykorzystałem go w portfolio dla przyjaciółki Karoliny Witeckiej, działanie można obejrzeć po kliknięciu piktogramu
Panel z kontrolnymi piktogramami przeskoczy na prawo, będzie wyrównany z górną częścią pierwszego zdjęcia* i w trakcie scrollowania w dół przyklei się do górnej krawędzi viewport przeglądarki.

Jeśli będziecie zaglądać do źródła, żeby się przekonać jak to jest zrobione, to z góry wstyd mi za resztę kodu JS. Nie mam nic na swoje usprawiedliwienie (że mało czasu to nie jest przecież wymówka). Sam kod obsługujący waypoints to:

// podpięcie waypoint
controll.waypoint(function(event, direction) {
   $(this).toggleClass('unfolded-fxd', direction === "down");
   event.stopPropagation();
});
// usunięcie waypoint (po ponownym przeskoczeniu listy w tryb poziomy)
controll.waypoint("remove");

(*) W przypadku, gdy przescrollowaliśmy na tyle daleko, że po przerzuceniu panelu kontrolnego miałby się schować (waypoint się niestety nie zorientuje) zostanie on “przyklejony” ręcznie, to jest snippet, który za to odpowiada:

 if(controll.get(0).offsetTop < window.scrollY) {
   controll.addClass("unfolded-fxd");
 }

Więcej przykładów na stronie jQuery Waypoints.