Archive

Archive for decembar, 2014

ExtJS4 – aktiviranje funkcije klikom na ikonicu/tekst u Grid objektu

decembar 1st, 2014 No comments

Postoji više načina kako možete da pokrenete akciju klikom na ikonicu ili tekst koji je prikazan u ćeliji Grid objekta:

  • Korišćenjem atributa renderer prilikom definisanja kolone Grid objekta
  • Korišćenjem tipa actioncolumn koji omogućava mnogo fleksibilniji način poziva funkcije
  • Korišćenjem događaja cellclick koji reaguje na celu ćeliju bez obzira da li ste kliknuli na tekst u okviru nje (prethodne dve se ponašaju kao link)

Krošćenjem atributa renderer

Ovo je najjednostavniji način za aktiviranje akcije. U okviru definisanja atributa kolone dodajemo atribut renderer. Ovaj atribut poziva funkciju kojoj se prosleđuje vrednost te ćelije (parametar v), HTML tag u okviru koga se on nalazi na stranici (parametar md), objekat koji obuhvata podatke celog reda (parametar r).

Ovaj atribut se koristi kako bi promenili izgled vrednosti koja se prikazuje u ćeliji. Ukoliko bi u okviru funkcije napisali „return v;“, efekat je isti kao da nismo naveli ovaj atribut. Praktičan je ukoliko npr. imate potrebu da u zavisnosti od vrednosti postavite ikonicu koj definiše status. U našem primeru se koristi kako bi kreirali link. Klik na link poziva funkciju show_comments_of_user().

Mana ovog načina je što nije moguće proslediti promenljivu već samo konkretne vrednosti. Navedeni primer za razliku od druga dva nema promenljivu „r“ koja predstavlja objekat sa podacima cele linije.

Zaključak, ovaj način koristite kada želite da prikažete neku vrednosti, ili da pozovete funkciju kojoj prosleđujete konkretne vrednosti.

columns : [
    ...
    {
        dataIndex:'comment',
        cls:'colComments',
        header:'User comments',
        tooltip:'User comments',
        width:24,
        menuDisabled:true,
        renderer:function(v, md, r) 
        {
            return '<a href="javascript:void(0)" '+
                      'onclick="show_comments_for_user(\'comment_view\');">'+
                   'View<\/a>'; 
        }
    }
    ...
]

Korišćenjem tipa actioncolumn

Ovaj pristup, kao i naredni, je mnogo fleksibilniji kada je u pitanju prosleđivanje podataka funkciji. Umesto atributa „renderer“ u koloni se postavlja atribut „xtype“ kome se dodeli vrednost „actiontype“. Ovaj tip omogucava da se u ćeliji Grid objekta pojavi jedna ili više ikonica kojima će se dodeliti neka akcija kada se klikne na njih. Svaka od ikonica je objekat koji ima veliki broj svojih atributa. Za opis svih mogućnosti je najbolje da pogledate zvaničnu dokumenaciju.

Za nas je interesantan atribut „handler“, koji predstavlja funkciju koja će se izvršiti kada se klikne na ikonicu. Ova funkcija sadrži tri promenljive: Grid objekat, indeks reda u kome je ikonica na koju ste kliknuli, i indeks kolone u kojoj je ikonica na koju ste kliknuli. Prve dve promenljive koristimo kako bi dobili slog sa svim podacima u dato redu (linija 17). Na taj način smo dobili treću promenljivu funkcije iz prethodnog primera. Potom ostaje da se pozove odgovarajuća funkcija i da joj se proslede podaci (linija 18).

columns : [
    ...
    {
        dataIndex:'comment',
        cls:'colComments',
        header:'User comments',
        tooltip:'User comments',
        width:24,
        menuDisabled:true,
        xtype:'actioncolumn',
        items:[ 
            {
                iconCls:'icon-comments',
                tooltip:'View user comments',
                handler:function(grid, rIdx, cIdx) 
                {
                    var r = grid.getStore().getAt(rIdx);
                    show_comments_for_user(r, 'comment_view');
                    return false; 
                } 
            } 
        ]
    }
    ...
]

Korišćenjem događaja cellclick

Za razliku od prethodnog primera u kome je moguće više ikonica postaviti u okviru iste kolone, ovde je moguće postaviti samo jednu ikonicu po koloni. Razlog je taj, što se prati klik na ćeliju u Grid objektu a ne na samu ikonicu. Ovaj primer ima najjednostavniji način definisanja kolona Gid objekta. Jedino o čemu je potrebno da vodite računa je da atribut „dataIndex“ bude jedinstven za svaku kolonu a evo i razloga.

Klik na bilo koju od ćelija grid objekta aktivira događaj „cellclick„. Tom prilikom se prosleđuju više parametara, a nama je najinteresantniji parametar „cellIndex“ jer definiše broj kolone na koju je korisnik kliknuo mišem. Brojevi počinju od 0. Ovaj parametar bi trebalo da bude dovoljan da odredite da li je u pitanju ćelija sa odgovarajućom kolonom, ali to je samo napola tačno. Naime, vaša ćelija u grid objektu zauzima npr. četvrtu poziciju, ali ukoliko neka od prethodnih kolina nije vidljiva, vrši se i smanjivanje indeksa. Dakle, „cellIndex“ predstavlja redni broj vidljivih kolona u Grid objektu. Tu do izražaja dolazi jedinstvena vrednost dataIndex atributa. U linijama 16-21 je prikazano kako da od cellIndex dobijete vrednost za dataIndex. Na ovaj način bez obzira koja po redu je ćelija na koju ste kliknuli, ivek ćete imati ispravnu vrednost. Ostaje da se kroz par uslova proveri da li je u pitanju ćelija koja vama odgovara i da se aktivira funkcija. U navedenom primeru za to je korišćen switch() iskaz.

columns : [
    ...
    {
        dataIndex:'comment',
        cls:'colComments',
        header:'User comments',
        tooltip:'User comments',
        width:24,
        menuDisabled:true,
    }
    ...
]
listeners : {
    cellclick : function(ths, td, cellIndex, r, tr, rowIndex, e, eO)
    {
        var dataIdx = ths.up('grid')
                        .getView()
                        .panel
                        .headerCt
                        .getHeaderAtIndex(cellIndex)
                        .dataIndex;
        switch (dataIdx) {
            case 'comment' : 
                show_comments_for_user(r, 'comment_view'); 
                break;
            default :
                show_user(r, 'view');
                break;
        }
    }
}
Categories: Web Tags: