Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Srpski ExtJS Tutorijal

[es] :: Javascript i AJAX :: Srpski ExtJS Tutorijal
(TOP topic, by Nikola Poša)
Strane: 1 2

[ Pregleda: 20582 | Odgovora: 29 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Srpski ExtJS Tutorijal11.04.2010. u 22:24 - pre 169 meseci
ExtJS predstavlja JavaScript biblioteku za kreiranje interaktivnih web 2.0 aplikacija korišćenjem raznih tehnika tipa AJAX, DHTML i DOM skriptinga.

ExtJS uključuje raznolik skup GUI (Grafic User Interface) kontrola ( i tzv. Widget-a) za upotrebu unutar web aplikacija kao što su naprimer: Text field, Text area, Date field, List box, Combo Box, Radio i Check box kontrole, HTML editor, Tree kontrole, Tab panele, Toolbare, Flash grafikone, i najčešće upotrebljivanu stvar po meni, Grid kontrolu, i mnoge od ovih kontrola mogu da komuniciraju direktno sa serverside-om koristeći AJAX (Asynchronous JavaScript and XML).

No, da ne razglabamo previše sa teorijom, već ćemo videti kako sve to izgleda u praksi kroz jedan mali primer kreiranja telefonskog imenika u kome ću se potruditi da vam što jednostavnije objasnim korak po korak razvojni put jedne proste web 2.0 aplikacije dizajnirane u ExtJS-u, a za serverside ćemo koristiti PHP.

Pre nego što počnemo, postarajte se da preuzmete sa neta, sa zvaničnog ExtJS sajta (www.extjs.com) najnoviju verziju ExtJS biblioteke i možemo početi.
Za ovaj naš primer ja ću kao razvojno okruženje koristiti Netbeans (možete bilo koji tekstualni editor, Notepad++ ili dr.) ja sam se opredelio za netbeans čisto zbog formatiranja koda, a za rad na serverside-a ću koristiti WAMP server jer će mi biti potrebna podrška za rad sa PHP-om i MySQL bazom u koju ćemo da smeštamo podatke vezane za naš imenik (o serverside skriptama neće biti previše reči u ovom tutorijalu, jer se pretpostavlja da već posedujete znanje potrebno za programiranje istih u nekom od programskih jezika tipa PHP, C# ili nekom trećem... koji će nam služiti za obradu podataka).

Primer aplikacije koja je opisana u tutorijalu možete videti na ovoj adresi.

Komletan source tutorijala možete preuzeti sa ove lokacije.

Prvi korak – Kreiranje baze

Koriscićemo prostu strukturu baze koja će u mom primeru izgledati ovako:

Ime baze: „Imenik“
Ime tabele: „Kontakti“
(bez navodnika)
Struktura tabele će nam izgledati ovako:
Code:


Naziv polja |Tip polja    |Dodatno      
 -----------------------------------------------------------
|KontaktID  |Int (10)     |PK, AutoInc 
------------------------------------------------------------
|Telefon    |VarChar(30)    
 -----------------------------------------------------------
|Ime        |VarChar(15)
 -----------------------------------------------------------
|Prezime    |VarChar(15)
------------------------------------------------------------
|Adresa     |VarChar(100)


...naravno vi je možete izmeniti, ali imajte u vidu da ćete sami morati da vodite računa o tome u daljim koracima.

Drugi korak – Kreiranje layouta

Najpre ćemo da kreiramo osnovni layout naše aplikacije i mali loader obzirom da ext-ove biblioteke same po sebi nisu baš preterano ‘’male’’ po veličini (pogotovu ako uzmemo u obzir još uvek velik broj ljudi u našoj okolini koji još uvek koriste spor internet) kako bi imali uvid u to dokle je stiglo učitavanje naše aplikacije.

Kao što smo već rekli, obzirom da je ExtJS ništa drugo do malo naprednije pisan JavaScript na isti način kao i bilo koje druge skripte se uključuje u okviru HTML strane kao što možete videti u primeru ispod:

Index.html

Code:

<html>
<head>
<title>Telefonski imenik - 1.0 Alfa - Programmed in ExtJS by Vladica Savic</title>
<link href="css/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="loading-mask" style="">
</div>
<div id="loading">
<center>
<div>
<img src="slike/ajax-loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align: top;"/>
Telefonski imenik - 1.0 - <a href="http://www.vladicasavic.iz.rs">www.vladicasavic.iz.rs</a>
<br />
<span id="loading-msg" style="float: left;">
 Ucitavanje slika i stilova...
</span>
</div>
</center>
</div>
        <!-- include ext-all.css -->
    <link rel="stylesheet" href="js/ext/resources/css/ext-all.css" />
    <!-- include ext-base.js -->
    <script type="text/javascript">
        document.getElementById('loading-msg').innerHTML = 'Ucitavanje API-a';
    </script>
    <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
    <!-- include ext-all.js -->
    <script type="text/javascript">
        document.getElementById('loading-msg').innerHTML = 'Ucitavanje ExtJS-a';
    </script>
    <script type="text/javascript" src="js/ext/ext-all.js"></script>

    <script type="text/javascript">
        document.getElementById('loading-msg').innerHTML = 'Ucitavanje panela...';
    </script>

    <script type="text/javascript" src="js/toolbar/GlavniToolbar.js"></script>
    <script type="text/javascript" src="js/gridovi/Grid.js"></script>
    <script type="text/javascript" src="js/prozori/KontaktProzor.js"></script>
    <script type="text/javascript" src="js/Aplikacija.js"></script>

    <script type="text/javascript">
        document.getElementById('loading-msg').innerHTML = 'Aplikacija se pokrece...';
    </script>
</body>
</html>


(Izvinjavam se zbog smanjene preglednosti koda, ali moralo je ovako…)

Kao što ste i sami primetili, samo smo učitali skripte koje su nam potrebne za dalji rad sa ExtJS-om u svoju HTML stranu, i kako smo koju učitavali vršili smo ispis na ekranu kako bi imali indicator stanja dokle je stiglo učitavanje naše aplikacije.
Sve skripte koje smo učitali su ExtJS-ove osim skripte pod imenom Aplikacija.js koja je skripta gde ćemo da kreiramo aplikaciju i skripti GlavniToolbar.js, Grid.js, kao i KontaktProzor.js unutar kojih ćemo da generišemo objekte koje ćemo koristiti u Aplikacija.js fajlu.

Napomena!
Obzirom da je ovo sam početak i da nemamo ništa u svojoj aplikacici, i obzirom da ćemo kasnije kreirati jos par java skripti (ja cu ih uključiti na kraju ovog tutorijala u HTML strani, ali je važno da to napomenem na samom početku) čije ćemo objekte da koristimo moraćemo i te skripte da ukljućimo u našu HTML stranu i to vodeći računa o njihovoj hijerarhiji, tj. redosledu prema kojem ćemo kreirati objekte i prema kome ćemo ih koristiti dalje u aplikaciji.

Glavni layout

Naša aplikacija će se prikazivati u vidu prozora koji će u sebi sadrzati toolbar sa menijima za radnje tipa dodavanje novog kontakta, brisanje već unetih kontakata, i pozivanje dijalog prozora za izmenu odredjenih kontakata, i centralnog dela u kome će se nalaziti grid komponenta za prikaz unetih kontakata.

Za početak ćemo napraviti samo okvir prozora kome ćemo kasnije da dodamo toolbar sa gore navedenim menijima i ekranskim tasterima, i u koji ćemo da ubacimo grid komponentu.

To ćemo raditi u fajlu pod nazivom “Aplikacija.js” i on će izgledati ovako:

Aplikacija.js

Code:

Ext.namespace('TelefonskiImenik');
Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/default/s.gif';
Ext.onReady(function() {
    try {
           document.execCommand('BackgroundImageCache', false, true);
        } catch (ex) { }
    Ext.QuickTips.init();

    TelefonskiImenik.Application = function() {
        var hideMask = function () {
            Ext.get('loading').remove();            
            kreirajGlavniProzor();          
        }
        hideMask.defer(1000);           
                
        function kreirajGlavniProzor() {
            var glavniProzor = new Ext.Window({
                title        : 'Telefonski imenik 1.0 - Programmed in ExtJS by Vladica Savic',
                width        : 500,
                height        : 400,
                collapsible    : true,
                minimizable    : true,
                maximizable    : true,
                items        : [ ]
            });
            glavniProzor.show();
        };     
    } ();
});


I kao rezultat imaćemo prozor kao na slici ispod.



To će nam biti osnovni layout u kome ćemo da smeštamo ostale komponente (toolbar, grid).
Naša aplikacija će sadržati i toolbar u kome ćemo imati par dugmadi za dodavanje novih, brisanje i editovanje postojećih kontakata kao i jedno dugme za izlaz iz aplikacije. Pošto ćemo se u ovom malom tutorijalu truditi da programiramo na „pravilan“ način kao da je reč o nekoj velikoj aplikaciji koristićemo tzv. konstruktore, kako bi naš kod bio podeljen u logičke celine lakše i razumljivije drugima koji bi se kasnije recimo priključili u projekat i nastavili njegov dalji razvoj ili eventualne izmene.

GlavniToolbar.js

Code:

Ext.namespace('TelefonskiImenik');

TelefonskiImenik.GlavniToolbar = function() {
    var self = this;

    var akcija  = {
        DodajKontakt: new Ext.Action({
            text    : 'Dodaj',
            handler    : DodajKontakt,
            iconCls    : 'akcija-dodaj',
            scale    : 'medium'
        }),
        ObrisiKontakt: new Ext.Action({
            text    : 'Obrisi',
            handler    : ObrisiKontakt,
            iconCls    : 'akcija-obrisi',
            scale    : 'medium'
        }),
        IzmeniKontakt: new Ext.Action({
            text    : 'Izmeni',
            handler    : IzmeniKontakt,
            iconCls    : 'akcija-izmeni',
            scale    : 'medium'
        }),
        ZatvoriGlavniProzor: new Ext.Action({
            text    : 'Izlaz',
            handler    : ZatvoriGlavniProzor,
            iconCls    : 'akcija-izlaz',
            scale    : 'medium'
        })
    };

    function ZatvoriGlavniProzor() {
        self.fireEvent('ZatvoriGlavniProzor');
    }

    function DodajKontakt()
    {
        self.fireEvent('DodajKontakt');
    }
    function ObrisiKontakt()
    {
        self.fireEvent('ObrisiKontakt');
    }
    function IzmeniKontakt()
    {
        self.fireEvent('IzmeniKontakt');
    }

    TelefonskiImenik.GlavniToolbar.superclass.constructor.call(this, {
        items: [
            akcija.DodajKontakt,
            '-',
            akcija.ObrisiKontakt,
            '-',
            akcija.IzmeniKontakt,
            '->',
            akcija.ZatvoriGlavniProzor
            ]
    });
};

Ext.extend(TelefonskiImenik.GlavniToolbar, Ext.Toolbar, {
    initComponent: function() {
        TelefonskiImenik.GlavniToolbar.superclass.initComponent.apply(this, arguments);
        this.addEvents('DodajKontakt');
        this.addEvents('ObrisiKontakt');
        this.addEvents('IzmeniKontakt');
        this.addEvents('ZatvoriGlavniProzor');
    }
});
 


Šta primećujemo u ovom delu koda?

Primećujemo da imamo par definisanih akcija, opisanih tekstom, ikonom, tj. stilom, i tzv. handlerom, tj. funkcijom koja ce biti pokrenuta pozivanjem neke od ovih akcija. Takodje, svaka od ovih akcija predstavlja po jedan taster koji je predstavljen kao element konstruktora. Na interface-u možemo odvojiti tastere takozvanim separatorima koji se predstavljaju sa '-'. Takodje, možemo odvojiti grupu elemenata postavljajući je na drugi kraj toolbara separatorom '->' koji kaže da se sledeći element toolbar-a smesti skroz uz desnu stranu istog toolbara.

Takodje, pošto svaki od taster koristi odgovarajuću css klasu kako bi učitali željenu ikonicu moramo napraviti i css fajl koji ćemo uključiti u naš projekat, i napraviti odgovarajuće css klase, za naš slučaj to su sledeće klase: 'akcija-dodaj', 'akcija-obrisi',
'akcija-izmeni', 'akcija-izlaz'. Što zači da bi css fajl trebao da sadrzi sledeći kod vezan za tastere u toolbar-u:

Code:

/* Slike tastera glavnog toolbara */
.akcija-dodaj
{
    background-image: url(../slike/akcija-dodaj.png) !important;
}
.akcija-obrisi
{
    background-image: url(../slike/akcija-obrisi.png) !important;
}
.akcija-izmeni
{
    background-image: url(../slike/akcija-izmeni.png) !important;
}
.akcija-izlaz
{
    background-image: url(../slike/akcija-izlaz.png) !important;
}


Napomena!
Vodite računa o putanjama i nazivima ikona koje želite da dodate kako se ne bi desilo da na interface-u dobijete taster bez ikone.
Nakon dodavanja GlavniToolbar.js skripte u listu skripti na nasoj index strani (ukljucenu pre Aplikacija.js skripte) kreiranja toolbar objekta unutar Aplikacija.js fajla radi se na sledeći način:

Code:

var glavniToolbar = new TelefonskiImenik.GlavniToolbar();


I postavljanja tbar (toolbar) property-a objektu “glavniProzor” na sledeći način:

Code:

var glavniProzor = new Ext.Window({
                title        : 'Telefonski imenik 1.0 - Programmed in ExtJS by Vladica Savic',
                width        : 500,
                height        : 400,
                collapsible    : true,
                minimizable    : true,
                maximizable    : true,
                maximized    : false,
                items        : [ ],
                tbar        : glavniToolbar
            });


Pokretanjem aplikacije dobijamo prizor kao na slici ispod.



Naša aplikacija će takodje sadržati još jedan prozor koji će nam služiti za unos novih kontakata i izmenu postojećih. Njega ćemo definisati u fajlu pod imenom KontaktProzor.js koji ćemo takodje uključiti u Index.html stranu, opet vodeći računa o tome da se on učita pre Aplikacija.js skripte.

KontaktProzor.js

Code:

Ext.namespace('TelefonskiImenik');

TelefonskiImenik.KontaktProzor = function(rezim) {
    var self = this;
    var naslovProzora = (rezim=='izmena')?"Izmeni informacije":"Unos novog kontakta";
    var akcija  = {
        SacuvajKontaktInformacije: new Ext.Action({
            text    : 'Sacuvaj',
            handler    : SacuvajKontaktInformacije
        }),
        ZatvoriKontaktProzor: new Ext.Action({
            text    : 'Zatvori',
            handler    : ZatvoriKontaktProzor
        })
    };

    function ZatvoriKontaktProzor(akcija, e)
    {
        self.close();
    }
    function SacuvajKontaktInformacije(akcija, e)
    {
        self.fireEvent('SacuvajKontaktInformacije');
    }

    TelefonskiImenik.KontaktProzor.superclass.constructor.call(this, {
        title        : naslovProzora,
        width        : 290,
        height        : 290,
        resizable    : false,
        split        : true,
        modal        : true,
        items        : [{
                            xtype: 'label',
                            style: 'margin: 5;',
                            text: 'Ime:'
                        },{
                            xtype:'textfield',
                            width: 265,
                            name: 'Ime',
                            id: 'Ime',
                            style: 'margin: 5px;'
                        },{
                            xtype: 'label',
                            style: 'margin: 5;',
                            text: 'Prezime:'
                        },{
                            xtype:'textfield',
                            width: 265,
                            name: 'Prezime',
                            id: 'Prezime',
                            style: 'margin: 5px;'
                        },{
                            xtype: 'label',
                            style: 'margin: 5;',
                            text: 'Adresa:'
                        },{
                            xtype:'textarea',
                            name: 'Adresa',
                            id: 'Adresa',
                            width: 265,
                            style: 'margin: 5px',
                            grow: false,
                            preventScrollbars:true
                        },{
                            xtype: 'label',
                            style: 'margin: 5;',
                            text: 'Telefon:'
                        },{
                            xtype:'textfield',
                            width: 265,
                            name: 'Telefon',
                            id: 'Telefon',
                            style: 'margin: 5px;'
                        }
                    ],
        buttons: [
            akcija.SacuvajKontaktInformacije,
            akcija.ZatvoriKontaktProzor
        ]

    });
};

Ext.extend(TelefonskiImenik.KontaktProzor, Ext.Window, {
    initComponent: function() {
        TelefonskiImenik.KontaktProzor.superclass.initComponent.apply(this, arguments);
        this.addEvents('SacuvajKontaktInformacije');
    }
});


Šta možemo da primetimo ovde... Obzirom da ćemo ovaj isti objekat-prozor da koristimo i za unos novih i za izmenu postojećih kontakata kao parameter f-ji koja služi za kreiranje ovog prozora slaćemo i parameter koji služi kao identifikatr “režima” prema kome ćemo da prikažemo korisniku na interface-u prozor prilagodjen novom unosu, ili izmeni kontakata.

Takodje, možemo da primetimo da ovaj objekat ima tzv item-e, tj. da sadrži druge objekte, u ovom konkretnom slučaju sadrži par labela koje nam služe kao identifikatori korisniku koje je polje čemu namenjeno, text field-ova i text area u kojima će korisnik da unosi podatke koji će se upisivati u bazu.

Postoji dva načina za kreiranje objekata / item-a koje neki drugi objekat može da sadrži. Ja sam item-e onde definisao unutar samog objekta na sledeći način:

Code:


{
    xtype                :'textarea',
    name                : 'Adresa',
    id                    : 'Adresa',
    width                : 265,
    style                : 'margin: 5px',
    grow                : false,
    preventScrollbars    :true
}
… 


... na ovaj način mi dakle definišemo preko xtype property-a o kom tipu objekta se radi, u ovom slucaju radi se o text area objektu, definišemo mu ime, id, stil, i druga adekvatna svojstva tom tipu objekta.

Drugi način je da kreiramo zaseban objekat koji samo dodamo nekom drugom element po potrebi.
Npr. ekvivalent gore definisanom objektu može se napraviti i ovako:

Code:

… 
var nekiTextAreaObjekat = Ext.form.TextArea({
    name                : 'Adresa',
    id                    : 'Adresa',
    width                : 265,
    style                : 'margin: 5px',
    grow                : false,
    preventScrollbars    :true
});
… 


...i kasnije samo dodamo u listu item-a promenjivu nekiTextAreaObjekat i na taj način možda dobijemo i donekle preglednije rešenje.

Pored prethodno kreiranih objekata, jedna od najkorisnijih po meni i najčešće upotrebljivanih komponenti je tzv. grid komponenta. Ona će u našem slučaju služiti za prikaz svih prethodno unetih podataka. Nju ćemo definisati u Grid.js fajlu na sledeći način:

Grid.js

Code:

Ext.namespace('TelefonskiImenik');
TelefonskiImenik.KontaktGrid = function() {
                    
    var paginacija = 20;
    
    var storeRecord = new Ext.data.Record.create([
        { name: 'KontaktId', type: 'int' },
        { name: 'Ime' },
        { name: 'Prezime' },
        { name: 'Adresa' },
        { name: 'Telefon' }
    ]);
    
    var dataStore = new Ext.data.Store({
        url: 'ServerSide/Obradi.php',
        baseParams: {
            action    : 'ucitajKontakte',
            limit    : paginacija
        },
        reader: new Ext.data.JsonReader(
            {
                root            : "podaci",
                totalProperty    : "ukupnoKontakata"
            },
            storeRecord
        ),
        listeners: {
            'loadexception': {
                fn: function(data) {
                    var responseText = data;
                    if(responseText == '') {
                         Ext.MessageBox.alert('Informacija', 'Nema unetih kontakata u bazi.');
                    }
                }
            }
        }
    });
    
    TelefonskiImenik.KontaktGrid.superclass.constructor.call(this, {
        title        : '',
        store        : dataStore,       
        loadMask    : false,
        border        : false,
        frame        : false,
        stripeRows    : true,    
        bbar: new Ext.PagingToolbar({
                    pageSize    : paginacija,
                    store        : dataStore,
                    displayInfo    : true,
                    displayMsg    : 'Prikazano {0} - {1} od {2} kontakta',
                    emptyMsg    : "0 - 0 od 0"
                }),     
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: true
        }),
        columns: [
            { 
                id            : 'Ime',
                width        : 100,
                header        : 'Ime',
                dataIndex    : 'Ime',
                sortable    : true
            },
            { 
                header        : 'Prezime',
                width        : 100, 
                dataIndex    : 'Prezime',
                sortable    : true 
            },
            { 
                header        : 'Adresa',
                width        : 260,
                dataIndex    : 'Adresa',
                sortable    : true 
            },
            { 
                header        : 'Telefon',
                width        : 100,
                dataIndex    : 'Telefon',
                sortable    : true 
            }
        ]
    });
};

Ext.extend(TelefonskiImenik.KontaktGrid, Ext.grid.GridPanel, {
    initComponent: function() {
        TelefonskiImenik.KontaktGrid.superclass.initComponent.apply(this, arguments);
    },
    onRender: function() {
        TelefonskiImenik.KontaktGrid.superclass.onRender.apply(this, arguments);
    }
});


Šta je ono karakteristično što primećujemo u ovom delu koda... Ovde primećujemo da imamo jedan dataStore objekat koji nam u suštini predstavlja objekat u koji smeštamo podatke koje ćemo prikazivati u našem gridu. Definiciju objekata koje sadrži dataStore predstavlja dataRecord.

Takodje, pošto ćemo da sa servera dovlačimo podatke u json formatu data store će koristiti Json Reader za čitanje tih istih podataka.

Url parameter data store objekta predstavlja koji handler će se pozvati za dobijanje podataka sa server, a baseParams predstavlja deo u kome definišemo koje ćemo dodatne podatke slati serverskoj skripti. U našem slučaju pošto nam se ceo pozadinski kod nalazi u istoj skripti a mi želimo da izvršimo samo onaj deo koji će nam vratiti podatke iz baze prosledjujemo parametar actions koji dalje na serverskoj strani hvatamo kako bi skripta izvršila samo taj potreban deo koda i limit koji nam predstavlja koliko rezultata želimo da nam upit vrati (kako bi izbegli preopterećivanje servera i bespotrebno vraćanje svih rezultata sql upita) koji se odnosi na prethodno unete kontakte.

Takodje, specifičan deo našeg grida je RowSelectionModel koji je postavljen na singleSelect što znači da samo jedan red može biti selektovan, mada se to može izmeniti po potrebi da u isto vreme korisnik može da selektuje više redova, ali u našem slučaju to nije potrebno.

Takodje, karakteristično za grid je bottom bar (bbar) mada se može koristiti i u toolbar-u PagingToolbar koji služi za paginaciju podataka u gridu.
Takodje još jedan karakterističan deo za grid je deo za definisanje kolona koja se prikazuju u njemu. Pored standardnog izgleda koji je inače korišćen za naš slucaj, moguće je pridružiti tzv. renderer koji omogućuje da se odredjena polja po potrebi drugačije prikazuju na interfejsu, recimo da se u ćeliji grid-a prikaže combobox, checkbox, datefield, color picker, ili neki custom html.

Neki svoj custom template ovjekat (ovo je generalno, ne vezano za grid) možete definisati na sledeći način:

Code:

var vasTemplateObjekat = new Ext.XTemplate(
          '<div>Neki vaš HTML</div>',
          '<p>...koji se može podesiti kako god želite!</p>'
);


Nakon dodatih skripti, i podešavanja na gore prikazan način dobili bi interface kao na slici ispod:



Nakon što smo prethodno ukratko opisali objekte koje ćemo koristiti, u fajlu Aplikacija.js napravićemo adekvatne objekte i postaviti ih kao odgovarajuće item-e u naš glavni layout. Evo kako izgleda konačna verzija datog fajla, obzirom da je “pozamašan“ ja ću prokomentarisati samo neke delove ovog fajla, koji su vama bitni, tj. ono što je na neki način korisno, i specifično za sam ext, o logici aplikacije ću samo ukratko, jer smatram da svako ko se našao ovde da već ima neko ranije iskustvo u programiranju u nekom od drugih programskih jezika i da objašnjenja na tu temu nisu neophodna.

Aplikacija.js

Code:

Ext.namespace('TelefonskiImenik');
Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/default/s.gif';
Ext.onReady(function() {
    try {
        document.execCommand('BackgroundImageCache', false, true);
    } catch (ex) { }
    Ext.QuickTips.init();

    TelefonskiImenik.Application = function() {
        var hideMask = function () {
            Ext.get('loading').remove();
            
            kreirajGlavniProzor();
        }
        hideMask.defer(1000);

        //Overide standardnog teksta dugmadi i sl. extjs kontrola 
        //kako bi bili lokalizovani za naš jezik...
        //-------------------------------------------------------
        Ext.MessageBox.buttonText = {
            ok        : "OK",
            cancel  : "Otkazi",
            yes      : "Da",
            no       : "Ne"
        };

        Ext.apply(Ext.PagingToolbar.prototype, {
            beforePageText  : "Strana",
            afterPageText    : "od {0}",
            firstText            : "Prva strana",
            prevText           : "Prethodna strana",
            nextText           : "Sledeca strana",
            lastText            : "Poslednja strana",
            refreshText        : "Osvezi"
        });

        Ext.apply(Ext.grid.GridView.prototype, {
            sortAscText        : "Sortiraj rastuce",
            sortDescText       : "Sortiraj opadajuce",
            columnsText        : "Kolone"
        });
        //-----------------------------------------------------
        function kreirajGlavniProzor() {
            var glavniToolbar   = new TelefonskiImenik.GlavniToolbar();
            var kontaktGrid     = new TelefonskiImenik.KontaktGrid();

            kontaktGrid.getStore().load({
                params:{
                    start: 0,
                    limit: 20
                }
            });
        
            glavniToolbar.on(
                'ZatvoriGlavniProzor',function(e, target) {
                    ZatvoriGlavniProzor();
                });
            glavniToolbar.on('DodajKontakt',function(e, target) {
                DodajKontakt();
            });
            glavniToolbar.on('ObrisiKontakt',function(e, target) {
                ObrisiKontakt();
            });
            glavniToolbar.on('IzmeniKontakt',function(e, target) {
                IzmeniKontakt();
            });

            var glavniProzor = new Ext.Window({
                title            : 'Telefonski imenik 1.0 - Programmed in ExtJS by Vladica Savic',
                width          : 600,
                height         : 400,
                layout         :'fit',
                collapsible    : true,
                maximizable  : true,
                maximized    : false,
                items: [
                    kontaktGrid
                ],
                tbar        : glavniToolbar
            });
            glavniProzor.show();

            function ZatvoriGlavniProzorAkcija(buttonId, text, opt)
            {
                if(buttonId=="yes")
                {
                    glavniProzor.close();
                }
            }

            function ZatvoriGlavniProzor(){
                Ext.Msg.show({
                    title   : 'Izlaz',
                    msg     : 'Da li stvarno zelite da napustite aplikaciju?',
                    buttons : Ext.Msg.YESNO,
                    fn      : ZatvoriGlavniProzorAkcija,
                    width   : 300
                });
            }

            function SacuvajKontaktInformacije(rezim){
                
                var ime     = Ext.get('Ime').dom.value;
                var prezime = Ext.get('Prezime').dom.value;
                var adresa  = Ext.get('Adresa').dom.value;
                var telefon = Ext.get('Telefon').dom.value;

                if(rezim=='izmena'){
                    //Deo koda vezan za izmenu podataka o trenutno selektovanom kontaktu
                    IzmeniKontaktAkcija(ime, prezime, adresa, telefon);
                }else{
                    //Deo koda za insert novog kontakta u imenik
                    DodajKontaktAkcija(ime, prezime, adresa, telefon);
                }
            }
            function ObrisiKontakt(){
                //Proveravamo da li je selektovan neki od kontakata da bi mogli da ga obrisemo
                if (kontaktGrid.getSelectionModel().hasSelection())
                {
                    Ext.Msg.show({
                        title   : 'Brisanje',
                        msg     : 'Da li stvarno zelite da obrisete kontakt iz imenika?',
                        buttons : Ext.Msg.YESNO,
                        fn      : ObrisiKontaktAkcija,
                        width   : 320
                    });
                }else{
                    Ext.Msg.show({
                        title   :'Greska',
                        msg     :'Niste izabrali kontakt koji zelite da obrisete!',
                        buttons : Ext.Msg.OK
                    });
                }
            }
        
            function DodajKontakt(){
                var kontaktProzor = new TelefonskiImenik.KontaktProzor("dodavanje");
                kontaktProzor.show();
                kontaktProzor.on('SacuvajKontaktInformacije',function(e, target) {
                    SacuvajKontaktInformacije("dodavanje");
                    kontaktProzor.close();
                });
            }

            function IzmeniKontakt(){
                if (kontaktGrid.getSelectionModel().hasSelection())
                {
                    var kontaktProzor = new TelefonskiImenik.KontaktProzor("izmena");
                    kontaktProzor.show();

                    //...nakon otvaranja kontakt prozora automatski popunjavamo polja
                    //vrednostima iz selektovanog reda iz grida

                    Ext.get('Ime').dom.value        = kontaktGrid.getSelectionModel().getSelections()[0].data.Ime;
                    Ext.get('Prezime').dom.value    = kontaktGrid.getSelectionModel().getSelections()[0].data.Prezime;
                    Ext.get('Adresa').dom.value     = kontaktGrid.getSelectionModel().getSelections()[0].data.Adresa;
                    Ext.get('Telefon').dom.value    = kontaktGrid.getSelectionModel().getSelections()[0].data.Telefon;

                    //...pristupanje i postavljanje vrednosti nekom objektu
                    //Ext.get('idElementa').dom.value = 'neka vrednost';
                    //...pristupanje i postavljanje vrednosti nekom objektu na drugaciji nacin
                    //Ext.get('idElementa').set({
                    //    value: 'neka vrednost'
                    //});

                    kontaktProzor.on('SacuvajKontaktInformacije',function(e, target) {
                        SacuvajKontaktInformacije("izmena");
                        kontaktProzor.close();
                    });
                }else{
                    Ext.Msg.show({
                        title   :'Greska',
                        msg     :'Niste izabrali kontakt koji zelite da izmenite!',
                        buttons : Ext.Msg.OK
                    });
                }
            }

            function IzmeniKontaktAkcija(imeKontakta, prezimeKontakta, adresaKontakta, telefonKontakta)
            {
                kontaktGrid.getGridEl().mask('Snimanje izmena u toku...');
                var idKontakta = kontaktGrid.getSelectionModel().getSelections()[0].data.KontaktId;
                Ext.Ajax.request({
                    url: 'ServerSide/Obradi.php',
                    method: 'POST',
                    params: {
                        action      : 'izmeniKontakt',
                        kontaktID   : idKontakta,
                        ime         : imeKontakta,
                        prezime     : prezimeKontakta,
                        adresa      : adresaKontakta,
                        telefon     : telefonKontakta
                    },
                    success: function(response, options) {
                        kontaktGrid.getStore().load({
                            params:{
                                start    : 0,
                                limit    : 20
                            }
                        });
                        kontaktGrid.getGridEl().unmask(true);
                    }
                });
            }
            
            function DodajKontaktAkcija(imeKontakta, prezimeKontakta, adresaKontakta, telefonKontakta){
                kontaktGrid.getGridEl().mask('Unose se novi podaci...');
                Ext.Ajax.request({
                    url: 'ServerSide/Obradi.php',
                    method: 'POST',
                    params: {
                        action  : 'dodajKontakt',
                        ime     : imeKontakta,
                        prezime : prezimeKontakta,
                        adresa  : adresaKontakta,
                        telefon : telefonKontakta
                    },
                    success: function(response, options) {
                        kontaktGrid.getStore().load({
                            params:{
                                start    : 0,
                                limit    : 20
                            }
                        });
                        kontaktGrid.getGridEl().unmask(true);
                    }
                });
            }
            
            function ObrisiKontaktAkcija(buttonId, text, opt){
                if(buttonId=="yes")
                {
                    kontaktGrid.getGridEl().mask('Podaci se osvezavaju ...');
                    Ext.Ajax.request({
                        url: 'ServerSide/Obradi.php',
                        method: 'POST',
                        params: {
                            action      : 'obrisiKontakt',
                            kontaktID   : kontaktGrid.getSelectionModel().getSelections()[0].data.KontaktId
                        },
                        success: function(response, options) {
                            kontaktGrid.getStore().load({
                                params:{
                                    start    : 0,
                                    limit    : 20
                                }
                            });
                            kontaktGrid.getGridEl().unmask(true);
                        }
                    });
                }
            }
        }
    } ();
}); 


Šta je zanimljivo u ovoj skripti?

Po meni, u ovoj skripti za ovaj mali tutorijal, najzanimljivija je Ext.Ajax.request metoda.
Ona nam služi za asinhronu razmenu informacija sa serverom. Mi dakle navodimo lokaciju server side skripte kojoj se "obraćamo", listu parametara koje šaljemo datoj skripti, i navodimo šta želimo da se dalje izvrši u zavisnosti od toga da li server uspešno obradi zahtev ili se desi neki error.

Code:

Ext.Ajax.request({
    url: 'ServerSideSkripta.php',
    method: 'POST',
    params: {
        //Dodatni parametri koji se salju server side skripti koja je navedena u url-u  
    },
    success: function(response, options) {
        //deo namenjen za izvrsenje dela koda nakon uspesne ajax obrade
        //...u ovom delu koda mozete takodje videti response sa servera
        //a koji opet i dalje mozete obradjivati po zelji.
    }
});


Takodje, tu je i deo za interakciju s korisnikom. U zavisnosti od neke akcije ponekad je potrebno obavestiti korisnika da je željena akcija obavljena ili nije, ili da se korisnik upita da li je siguran da zaista želi da izvrši akciju koju je izabrao, npr. akcija brisanja nekog kontakta u našem slučaju. Ext nudi zanimljive dijaloge.
Evo primera kako se koriste dijalozi.

Code:

Ext.Msg.show({
    title   : 'Neki vas title poruke',
    msg     : 'Neki tekst koji zelite da prikazete korisniku',
    buttons : Ext.Msg.YESNO, //Moguci tasteri: Ext.Msg.OK, Ext.Msg.YESNOCANCEL ...
    //Funkcija koja se pokrece na klik na taster u okviru dijaloga
    fn      : VasaFunkcija,
    width   : 320
});


...detekcija tastera koji je bio kliknut od strane korisnika u okviru dijaloga koji je prikazan ide po parametru buttonId u funkciji koja je navedena za dijalog (...dakle VasaFunkcija(buttonId,...)).

Pozadinski kod – PHP

Ceo pozadinski kod koji ćemo koristiti za upis, čitanje podataka iz baze, izmenu i brisanje (tzv. CRUD) stavićemo u skriptu pod imenom „Obradi.php“ koji će izgledati ovako:

Obradi.php

Code:

<?php
/* 
 * Kod za citanje podataka/kontakata iz baze, izmenu, brisanje, i unos
 * ...deo koda manje vazan za ceo ovaj tutorijal.
 */
if(isset($_POST["action"])) {
    //Promeniti parametre za pristup bazi u odgovarajuce po potrebi
    $konekcija = mysql_connect("localhost", "root", "") or die (mysql_error ());
    $baza = mysql_select_db ("imenik") or die (mysql_error ());

    $akcija = $_POST["action"];
    switch ($akcija) {
        case "ucitajKontakte": {
                $sql = mysql_query ("SELECT * FROM kontakti") or die (mysql_error());
                $ukupno = mysql_num_rows($sql);
                $sqlRezultat = mysql_query (
                        "SELECT * FROM kontakti ORDER BY KontaktId LIMIT ".$_POST['start'].", ".$_POST['limit']."")
                        or die (mysql_error ());
                $podaci = array();
                while ($kontakt=mysql_fetch_object($sqlRezultat)) {
                    $podaci [] = $kontakt;
                }
                echo '({"ukupnoKontakata":"'.$ukupno.'","podaci":'.json_encode($podaci).'})';
            }
            break;
        case "dodajKontakt": {
                $ime        = $_POST["ime"];
                $prezime    = $_POST["prezime"];
                $adresa     = $_POST["adresa"];
                $telefon    = $_POST["telefon"];

                $sqlDodajKontakt = 'INSERT INTO kontakti (
                                        Ime,
                                        Prezime,
                                        Adresa,
                                        Telefon)
                                    VALUES (
                                        "'.$ime.'",
                                        "'.$prezime.'",
                                        "'.$adresa.'",
                                        "'.$telefon.'")';
                mysql_query("SET NAMES utf8");
                echo $sqlDodajKontakt;
                if(!mysql_query($sqlDodajKontakt)) {
                    die('Greska! Kontakt nije unet. Detalji greske: '.mysql_error());
                }
            }
            break;
        case "izmeniKontakt": {
                $kontaktID  = $_POST["kontaktID"];
                $ime        = $_POST["ime"];
                $prezime    = $_POST["prezime"];
                $adresa     = $_POST["adresa"];
                $telefon    = $_POST["telefon"];

                $sqlIzmena = 'UPDATE kontakti SET
                            Ime         = "'.$ime.'",
                            Prezime     = "'.$prezime.'",
                            Adresa      = "'.$adresa.'",
                            Telefon     = "'.$telefon.'"
                        WHERE
                            KontaktId   = "'.$kontaktID.'"';
                echo $sqlIzmena;
                mysql_query("SET NAMES utf8");
                if(!mysql_query($sqlIzmena)) {
                    die('Greska! Kontakt nije unet. Detalji greske: '.mysql_error());
                }
            }
            break;
        case "obrisiKontakt": {
                $idKontakta = $_POST["kontaktID"];

                $sqlObrisi = 'DELETE FROM kontakti WHERE KontaktId = "'.$idKontakta.'"';

                echo $sqlObrisi;
                mysql_query("SET NAMES utf8");
                if(!mysql_query($sqlObrisi)) {
                    die('Greska! Kontakt nije obrisan. Detalji greske: '.mysql_error());
                }
            }
            break;
    }
}
?>


...ukratko, obzirom da se u ovom fajlu nalazi ceo kod koji aplikacija koristi, da se skripta ne bi uvek cela izvršavala, na osnovu parametra actions koji saljemo skripti u post-u preko ext-a definišemo koja akcija tacno treba da se izvrši (npr. akcija za ucitavanje kontakata, izmenu, brisanje...)

Rečnik pojmova

Namespace je apstraktni kontejner ili okruženje napravljen da čuva logičke grupe i jedinstvene identifikatore ili simbole.

Identifikator koji je definisan u namespace-u je asociran samo sa tim namespace-om. Istim identifikator može biti definisan u više različitih namespace-ova. To znači da značenje asocirano na identifikator u jednom namespace-u može ali i ne mora da ima isto značenje kao isti identifikator definisan u drugom namespace-u.

Jezik koji podržava namespace specifikuje pravila koja odredjuju kojem namespace-u identifikator pripada.

U programiranju scope je najprostije rečeno zatvaranje konteksta gde su vrednosti i izrazi asocirani. Različiti programski jezici imaju različite tipove scope-ova. Tip scope-a odredjuje koje vrste entiteta može da sadrži i kako se odražava na njih.

Uobicajno scope se koristi da se definiše vidljivost i doseg “sakrivenih” informacija.

Scope moze da:
- Sadrži deklaraciju ili definiciju identifikatora.
- Sadrži izraze koje definišu izvršavajući algoritam ili bar deo njega.
- Se ugnježdava ili da bude ugnjezden.

Events (Dogadjaji) - Dogadjaji su odazivi korisnikovih akcija ili promena stanja izvora dogadaja.

Neke definicije pojmova su preuzete sa wikipedije i mozda deluju nejasno, ali nisam umeo da ih sam objasnim bolje, ali ko želi u svakom slučaju na raspolaganju ima google pa može da potraži više informacija o pojmovima koji su mu nejasni.

---------------------------------------------------------------------------
Svako dobro svim čitaocima koji su preživeli ovaj dokument do kraja, koji ih nadam se nije previše smorio, i koji se možda nekom neće svideti i činiti se nedorečenim, ali, naravno, ukoliko neko bude imao neko pitanje može me slobodno kontaktirati (ali zbog obaveza ne očekujte preterano brz odgovor) ili dodati jos nešto svoje. ;)
 
Odgovor na temu

misk0
.: Lugano :. _.: CH :.

SuperModerator
Član broj: 634
Poruke: 2824
*.adsl.ticino.com.

ICQ: 46802502


+49 Profil

icon Re: Srpski ExtJS Tutorijal11.04.2010. u 23:31 - pre 169 meseci
Nisam procitao sve, jer koristim ExtJS ali SVAKA CAST !!!! Cestitam na trudu i mislim (ako se i modovi slazu) da ovo moze u TOP temu. Bilo mi bi drago ako bi nastavio sa tim clancima, tj svako toliko da napises neki nov. ExtJS je fantastican framework.
:: Nemoj se svadjati sa budalom, ljudi cesto nece primjetiti razliku ::
 
Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-3.sezampro.yu.



+33 Profil

icon Re: Srpski ExtJS Tutorijal12.04.2010. u 09:38 - pre 169 meseci
I te kako ide u TOP temu. Odličan tutorijal!
 
Odgovor na temu

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Re: Srpski ExtJS Tutorijal12.04.2010. u 18:25 - pre 169 meseci
Hvala na pohvalama, nadam se da će tutorijal koliko toliko pomoći nekom ko se upusti u ExtJS. ;)
 
Odgovor na temu

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Re: Srpski ExtJS Tutorijal17.06.2010. u 07:11 - pre 167 meseci
Pozdrav nakon dužeg vremena opet, i da nastavimo sa još nekim zanimljivim i korisnim stvarčicama vezanim za ExtJS.

Jedna od veoma korisnih stvari koju cu pokušati da približim čitaocima koji su zalutali ovde je takozvani Ext Direct.

Šta je Ext Direct i čemu služi?

Ext Direct je možemo reci platforma koja omogućava direktno pozivanje server side metoda sa klijentske strane.
Postoje odgovarajući API-i za implementiranje ove platforme za veliki broj programskih jezika kao što su:
PHP, .NET, Java, Ruby, i drugi. Ja lično imam iskustva u radu sa Ext Direct-om u kombinaciji sa PHP-om i .NET-om, ali verujem da sve funkcioniše poprilično ok i za druge programske jezike.

Ono što je zajedničko za server side koji koristi ovu platformu je da korisnik treba da uradi sledeće:
- Da konfiguriše koja će "komponenta" (koji server side deo) biti dostupna sa klijentske strane.
- Da integriše odgovarajući API.
- Da konfiguriše odgovarajući takozvani ruter, tj. deo koji ce biti zadužen za preusmeravanje "zahteva" od klijentske strane ka odgovarajućim serverskim metodama.

Šta nam je potrebno da bi mogli da koristimo Ext Direct?
Da ne bi odstupali od prethodnog dela tutorijala, i ovaj put ćemo se za serverski deo oslanjati na PHP. Ext Direct Api za PHP čiji je inače autor João Bruni, ExtDirectApp.php skripta se može naći ovde.

Takodje, povezivanje sa ExtDirect API-jem u ovom slučaju uradjeno je preko skripte app.js koja izgleda ovako:
Code:

Ext.namespace( 'Ext.DirectTurorial' );

//Podesavanje API-a
Ext.DirectTurorial.REMOTING_API = { 
    'url': 'app.php',
    'type': 'remoting',
    'actions': { 'MojaBaseKlasa': [%actions%] }  
};

Ext.Direct.addProvider( Ext.DirectTurorial.REMOTING_API );

Ext.Direct.on( 'exception', function(e) { alert( 'Greska: ' + e.message ) } );

//Direktan poziv PHP metode i hvatanje odgovora sa servera!
MojaBaseKlasa.VratiNekiResponce( function(result){ alert( result ); } );


index.html stranica bi trebalo da izgleda ovako
Code:

<html>
    <head>
        <title>Ext.Direct PRIMER</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-all.js"></script>
        <script type="text/javascript" src="app.php"></script>
    </head>
    <body>
        <h1>Ext Direct tutorijal.</h1>
    </body>
</html>


Primećujete da na kraju u html fajlu uključujemo kao javascript php fajl, i verovatno se pitate zašto je to tako.
Odgovor je zato što nam on služi kao ruter svih zahteva koji će dolaziti na server i koji će vraćati odgovarajući responce.

Naj jednostavniji primer može izgledati ovako (app.php):
Code:

<?php
require 'ExtDirectApp.php';

class MojaBaseKlasa extends ExtDirectActions
{
    public function VratiNekiResponce()
    {
        return "Pozdrav svima koji ste zalutali ovde! Ovo je odgovor sa servera!";
    }
}

new ExtDirectController( 'MojaBaseKlasa' );
?>

Dakle, u ovom delu koda, mi uključujemo ExtDirect Api i klasu čije funkcije želimo da pozivamo, "proširujemo" sa ExtDirectActions klasom, i pravimo Ext Direct Contoler objekat čijem konstruktoru prosledjujemo kao parametar naziv klase iz koje želimo da sa klijentske strane pozivamo serverske metode.


Koje su prednosti?
Prednosti su očigledne, što se tiče programera, na njemu je da lepo organizuje kod, i bez problema da štedi kod i prste, a da dobije na produktivnosti.

Koje su mane?
Iskreno, ja nisam naišao na nešto što bi mi preterano zasmetalo, tako da ostajete uskraćeni za ovaj odgovor.

Pozdrav

 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal12.02.2011. u 23:49 - pre 159 meseci
Da li je neko pokusao ovo da upotrebi na framework Condeigniter?
Nesto se dvoumim da li da preuredim dizajn aplikacije ovo je fantasticno....
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 10:09 - pre 159 meseci
Citat:
alfa-pro: Da li je neko pokusao ovo da upotrebi na framework Condeigniter?
Nesto se dvoumim da li da preuredim dizajn aplikacije ovo je fantasticno....


Koji tacno deo? ExtJS sam po sebi ili Ext Direct?

U svakom slucaju imas ovako nesto.

PS, ExtJS jeste zanimljiv JS Framwork, koji na neki nacin "tera" programera da pise "elegantan" kod, kako bi se kasnije na nekom vecem projektu lakse snasao da izmeni nesto i sl. E, ali ono sto je mene pre odusevilo je Ext.NET :)

Ljudi su lepo napravili user kontrole za .NET, pomocu kojih mozes ekstremno brzo da razvijas aplikacije, ja sam cisto sebe radi napravio uporedni test za razvoj iste aplikacije koristeci klasican ExtJS i Ext.NET, rezultat je bar po mom subjektivnom misljenju da mi je Ext.NET ustedeo bar polovinu vremena.

PSS, imas i php-ext ali po mom misljenju nije to ta elegancija kao Ext.NET.
 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 14:57 - pre 159 meseci
Pazi ja sam za ovo juce slucajno cuo na Codeigniter forumu i pogledao na google i bas mi se svidelo, dok nije mi palo na pamet da probam da sada primenim na svoj uveliko zavrsen cms. Video sam kod tebe na linku u potpisu i pogledao malo tutor i zainteresovalo me je, nasao sam neku user app sa extjs za CI i stvarno je na prvi pogled WAU...

Problem je sto ja nemam pojma kako se ovo uopste koristi ne znam ni koliko ce mi vremena odneti da udjem u fazon za ovim JS-om...
Ne zelim da mi kod bude budzotina i prljav...

Hocu dizajn da promenim prozora, navigacije, uploud forme, tabove i ostale stvari...

Meni je jedino sada frka malo da vidim kako se povezuje extjs za kontrolerom i modelom da uspostavim tu vezu jer kod mene na CMS-u je sve radjeno MVC parent dok ja koristim HMVC zbog modula koje prikljucujem...


Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

misk0
.: Lugano :. _.: CH :.

SuperModerator
Član broj: 634
Poruke: 2824
*.adsl.ticino.com.

ICQ: 46802502


+49 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 15:30 - pre 159 meseci
Ja sam koristio ExtJS i CI (ili Kohanu, ne sjecam se). Radi poprilicno OK, ali trazi da skontas kako funkcionishe ExtJS.
:: Nemoj se svadjati sa budalom, ljudi cesto nece primjetiti razliku ::
 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 16:36 - pre 159 meseci
Cek sada meni ne ide u glavu ovo sa extJS posto ja imam module koji su razdvojeni. tipa
mod_user
i u njemu je pozadinski deo aplikacije koja se odnosi samo za korisnike (dodaj, izmeni, obrisi, privilegije itd...)
Da li ja za svaki modul moram da pravim poseban JS? ili se sve moze definisati u jednom JS samo da se nekako instancira?
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 17:01 - pre 159 meseci
ja ovo nista ne kapiram... ovo je sacuvaj boze... nemam pojma ni gde treba da kreiram prozore ni gde posle da ih instanciram ovaj tut sam procitao 10x vec... Izgleda da ja ovo sto ocu treba dobro da zagrejem stolicu sa ovim jedno 5 meseci da proucavam... Niti znam koje sve biblioteke treba da ucitam ovde ima tona koda i biblioteka...
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 19:00 - pre 159 meseci
Citat:
alfa-pro: ja ovo nista ne kapiram... ovo je sacuvaj boze... nemam pojma ni gde treba da kreiram prozore ni gde posle da ih instanciram...

Cek, ako sam dobro razumeo, tebi onda izgleda nije problem ExtJS vec kako da organizujes sve to?
 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal13.02.2011. u 19:15 - pre 159 meseci
Upravo tako...
Kapiram ja kod donekle, mislim kapiram ga da uradim ono sto meni treba citao sam manuel i doc sto ima na njihovom sajtu...

Ja sam napravio u mom include direktorijumu folder JSFRAMEWORK
to izgleda ovako

u jsframework folderu sam napravio folder EXT koji sadrzi folder ADAPTER i RESOURCES u Adapreru imam ext folder i u njemu dva fajla koja su JS ext-base.js i ext-base-debug.js

i sada ja uzmem neki primer iz example foldera i kopiram ga ali ja uopste nista ne dobijam nikakav izgled... Instanciram ja scripte i link real u headeru ali nista....

Ne znam da li je moja struktura direktorijuma dobra mozda je tu problem? Ne kapiram kako da napravim to stablo gde cu sve te scripte da organizujem i kada pozovem u view delu da se to prikaze.... Ostalo cu ja sam da ucim polako samo taj start mi je bitan


DOPUNA:

Ok nesto sam kao ukapirao sada malo sam citao po netu proucavao sam ovaj kod odavde iz tutora samo me buni ne kapiram kako ti zadajes output u index stranici?
Ja sam probao napravio kod sebe slicno ovome i nikako ne mogu da prikazem prozor u index-u...


[Ovu poruku je menjao alfa-pro dana 13.02.2011. u 23:46 GMT+1]
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Re: Srpski ExtJS Tutorijal14.02.2011. u 08:23 - pre 159 meseci
Ako si pratio, trebalo bi da radi, verovatno se iskrala neka greska. Firebug u sake i vidi dal se nesto buni :)
 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.adsl.eunet.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal14.02.2011. u 11:25 - pre 159 meseci
e ukapirao sam celokupnu sustinu kako funkcionise, sve pozivam preko id-a... ALi samo da provalim kako da kada ja napravim sablon layout koji ce imati levu navigaciju.. kako da taj layout ostane fixiran i klikom na meni na primer komanda USERS klikom iskoci novi prozor sa leve strane... da ne menja novu stranu ono ucitavanje... Radi sada ok je sve samo jos malo da udjem u fazon...
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

misk0
.: Lugano :. _.: CH :.

SuperModerator
Član broj: 634
Poruke: 2824
*.adsl.ticino.com.

ICQ: 46802502


+49 Profil

icon Re: Srpski ExtJS Tutorijal15.02.2011. u 21:26 - pre 159 meseci
Pa poput windows programiranja - sve forme / elemente koji ti trebaju inicijalizujes na startu aplikacije, sakrijes ih i prikazujes u zavisnosti od potrebe.
:: Nemoj se svadjati sa budalom, ljudi cesto nece primjetiti razliku ::
 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal16.02.2011. u 16:32 - pre 159 meseci
Znaci imam osnovni layout koji je uvek staticki na svakoj strani i klikom na neko dugme u navigaciji radim ono Navedem ime elementa (ID) onda akciju ONCLICK definisem glavne atribute prozoram, TITLE, WIDTH, HEIGHT itd... i na kraju samo navedem ime prozora.show().. Tako? Ili opet sam skrenuo sa puta?
Ja sam tako pokusao i radi samo sto sada googlao sam nesto i nisam ukapirao.
Ja napravim prozor i to super radi ali nije mi jasno kako da ja u ovoj npr gore navedenoj akciji definisem toolbar? Da li sve to u istom kodu ili u odvojenom? I nije mi jasno kako da ja taj toolbar ako je u drugom fajlu pozovovem u ovaj script koji sam gore naveo??? Gore u tutoru sve je odvojeno pa me buni ne mogu da ukapiram kako on povezuje drugi script u prvi? Neznam da li me razumete sta sam hteo reci?
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

misk0
.: Lugano :. _.: CH :.

SuperModerator
Član broj: 634
Poruke: 2824
*.adsl.ticino.com.

ICQ: 46802502


+49 Profil

icon Re: Srpski ExtJS Tutorijal16.02.2011. u 20:19 - pre 159 meseci
Ovako teorijski (bez koda je naglabanje).
Definishes sve prozore i njihove elemente (toolbar, buttone, input). Postavis im atribut hidden (ne znam na pamet). I onda u zavisnosti od akcije - prikazujes jedan/ sakrivas drugi i slicno.
Sve skripte koje ti trebaju potrpas u osnovni html fajl. Najbolje je da objekte (prozore) slozis u razlicite fajlove.
:: Nemoj se svadjati sa budalom, ljudi cesto nece primjetiti razliku ::
 
Odgovor na temu

Vladica Savić
Software Developer
Toronto, Canada

Član broj: 26699
Poruke: 654



+5 Profil

icon Re: Srpski ExtJS Tutorijal16.02.2011. u 20:35 - pre 159 meseci
Naravno, ovde u postu iznad kad kaze skrivas pokazujes podrazumeva da ne iskreiras odmah sve objekte, mozda ti neki ne trebaju, vec da po potrebi prvo napravis objekat, pa tek onda da ga koristis, kao onde sto si konkretno pitao za toolbar:

Code (javascript):

var glavniToolbar = new TelefonskiImenik.GlavniToolbar();
 

 
Odgovor na temu

alfa-pro
Pancevo

Član broj: 241818
Poruke: 476
*.dynamic.isp.telekom.rs.



+7 Profil

icon Re: Srpski ExtJS Tutorijal16.02.2011. u 22:26 - pre 159 meseci
Jee znaci ne mogu da verujem da sam tako corav... TO je tipicno OOP jos ja svoj dir za extjs nazovem framework u include diru i ne dopire mi do mozga...
Naravno naravno samo instanciram pozivam objekte itd... Hvala stvarno sto ste mi otvorili oci ja sam ocigledno corav covek...
Ako nesto zapne javim se
Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.
 
Odgovor na temu

[es] :: Javascript i AJAX :: Srpski ExtJS Tutorijal
(TOP topic, by Nikola Poša)
Strane: 1 2

[ Pregleda: 20582 | Odgovora: 29 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.