• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Architecting your app in ext js 4, part 2   learn   sencha
 

Architecting your app in ext js 4, part 2 learn sencha

on

  • 1,825 views

 

Statistics

Views

Total Views
1,825
Views on SlideShare
1,825
Embed Views
0

Actions

Likes
0
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Architecting your app in ext js 4, part 2   learn   sencha Architecting your app in ext js 4, part 2 learn sencha Document Transcript

    • Architecting Your App in Ext JS 4, Part 2 Search 11 Tw eet 16 Like 4 42 Comments Published Aug 01, 2011 | Tommy Maintz | Tutorial | Medium Ext JS, v4.x Last Updated Aug 10, 2011 RSS | Responses This Tutorial is most relevant to Ext JS, 4.x. In the previous Ext JS Architecture article, we explored how to architect a Pandora-style Community application using Ext JS. We took a look at the Model-View-Controller architecture and how Tw itter Facebook to apply it to a relatively complex UI application that had multiple views and models. In this Tum blr LinkedIn article, we’re going to move beyond architecting the application visually, and explore how to RSS Feed Vim eo design and code the controllers and models, starting with Ext.application and the Viewport class. Related Posts Let’s just jump in and start writing the application. The Sencha Class System Nov 29 Defining our application Architecting Your App in Ext In Ext JS 3, the Ext.onReady method was the entry point into your application, and the JS 4, Part 3 Sep 19 developer had to come up with an application architecture. In Ext JS 4, we have an introduced an MVC-like pattern. This pattern helps you to follow best practices when creating Ext Designer 1.2 Overview Aug 4 your applications. Any ideas? The entry point into an application written with the new MVC package requires that you use If you have any ideas to the E t a p i a i nmethod. This method will create an E t a p A p i a i n x.plcto x.p.plcto improve this article, please instance for you and will fire the l u c method as soon as the page is ready. This anh let us know essentially replaces the need to use E t o R a ywhile adding new functionality such as x.ned automatically creating a viewport and setting up your namespace. apApiainj p/plcto.s Etapiain{ x.plcto( nm:ad ae Pna, atCetVepr:tu, uoraeiwot re luc:fnto( { anh ucin) / Ti i frda so a tepg i ray / hs s ie s on s h ae s ed } }; ) The n m configuration causes a new namespace to be created. All our views, models, ae stores and controllers will live in this namespace. By setting a t C e t V e p r to uoraeiwot true, the framework will, by convention, include the a p v e / i w o t j file. In this p/iwVepr.s file, a class should be defined with the name P n a v e . i w o t matching the ad.iwVepr, namespace that was specified by the n m configuration of your application. aewww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 1/18
    • The Viewport class When we looked at which views we needed for our UI, we were very focused on the individual parts. The Viewport of an application acts as the glue for these individual parts. It loads the required views and defines the configuration needed to achieve your app’s overall layout. We have found that progressively defining your views and adding them to the viewport is the fastest way to create the base structure of your UI. It is important during this process to focus on scaffolding your views and not on the individual views themselves. It’s almost like sculpting. We start by creating the very rough shapes of our views and add more detail to them later. Creating the building blocks Leveraging the work we already did in the previous article, we are able to define many of the views at once. apve/eSainj p/iwNwtto.s Etdfn(Pnave.eSain,{ x.eiead.iwNwtto etn:x.omfedCmoo xed Etfr.il.obBx, ais igtnwtto la: wde.esain, soe erheut tr: SacRsls, ..mr cniuain.. . oe ofgrto . }; ) apve/ogotosj p/iwSnCnrl.s Etdfn(Pnave.ogotos,{ x.eiead.iwSnCnrl etn:x.otie xed EtCnanr, ais igtsncnrl la: wde.ogotos, ..mr cniuain.. . oe ofgrto . }; ) apve/ttosit p/iwSainLswww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 2/18
    • Etdfn(Pnave.ttosit,{ x.eiead.iwSainLs etn:x.rdPnl, xed Etgi.ae ais igtsainls la: wde.ttosit, soe ttos, tr: Sain ..mr cniuain.. . oe ofgrto . }; ) apve/eetylydcolrj p/iwRcnlPaeSrle.s Etdfn(Pnave.eetylydcolr,{ x.eiead.iwRcnlPaeSrle etn:x.iwVe xed Etve.iw, ais igtrcnlpaesrle la: wde.eetylydcolr, ieTl dv<dv tmp: <i>/i>, soe eetog tr: RcnSns, ..mr cniuain.. . oe ofgrto . }; ) apve/ognoj p/iwSnIf.s Etdfn(Pnave.ogno,{ x.eiead.iwSnIf etn:x.ae.ae xed EtpnlPnl, ais igtsnif la: wde.ogno, tl h>bu <h>p<p p: <1Aot /1<>/>, ..mr cniuain.. . oe ofgrto . }; ) We have left out some of the configuration here since component configurations are not in the scope of this article. In the above configurations, you’ll notice that we have three stores configured. These map to the store names prepared in the previous article. At this point we’ll go ahead and create our stores.www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 3/18
    • The models and stores Often, it is useful to start with static json files containing mock data to act as our server side. Later, we can use these static files as a reference when we actually implement a dynamic server side. For our app, we decided to use two models, Station and Song. We also need three stores using these two models that will be bound to our data components. Each store will load its data from the server side. The mock data files would look something like the following. Static data dt/og.sn aasnsjo { ucs tu, sces: re eut [ rsls: { ae:le A Snie(ie nm Bus t urs Lv), rit:tveRyVuhn, ats Sei a aga lu le A Snie, abm: Bus t urs ecito ecito frSei dsrpin: Dsrpin o tve, lyddt pae_ae: 1, tto 1 sain: }, .. . ] } dt/ttosjo aasain.sn { ucs tu, sces: re eut [ rsls: {i 1 lyddt 4 ae:e Zpei, d: , pae_ae: , nm Ld epln} {i 2 lyddt 3 ae:h RligSoe, d: , pae_ae: , nm Te oln tns} {i 3 lyddt 2 ae:atPn d: , pae_ae: , nm Df uk} ] } dt/erheut.sn aasacrslsjo { ucs tu, sces: re eut [ rsls: {i 1 ae:e Zpei, d: , nm Ld epln} {i 2 ae:h RligSoe, d: , nm Te oln tns} {i 3 ae:atPn, d: , nm Df uk} {i 4 ae:onMyr} d: , nm Jh ae, {i 5 ae:eePil &m;Prust, d: , nm Pt hly ap eqiie} {i 6 ae:lc Sa, d: , nm Bak tr} {i 7 ae:ayGa d: , nm Mc ry} ] }www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 4/18
    • Models Models in Ext JS 4 are very similar to Records which we had in Ext JS 3. One key difference is that you can now specify a proxy on your model, as well as validations and associations. The Song model for our application in Ext JS 4 would look like this. apmdlSn.s p/oe/ogj Etdfn(PnamdlSn { x.eiead.oe.og, etn:x.aaMdl, xed Etdt.oe fed:[i ae,rit,lu lyddt tto, ils d, nm ats abm, pae_ae, sain] poy { rx: tp:jx, ye aa ul aarcnsnsjo r: dt/eetog.sn, rae:{ edr tp:sn, ye jo ro:eut ot rsls } } }; ) As you can see, we have defined the proxy on our model. It is generally good practice to do this as it allows you to load and save instances of this model without needing a store. Also, when multiple stores use this same model, you don’t have to redefine your proxy on each one of them. Let’s go ahead and also define our Station model. apmdlSainj p/oe/tto.s Etdfn(PnamdlSain,{ x.eiead.oe.tto etn:x.aaMdl, xed Etdt.oe fed:[i ae,lyddt, ils d, nm pae_ae] poy { rx: tp:jx, ye aa ul aasain.sn, r: dt/ttosjo rae:{ edr tp:sn, ye jo ro:eut ot rsls } } }; ) Stores In Ext JS 4, multiple stores can use the same data model, even if the stores will load their data from different sources. In our example, the Station model will be used by the SearchResults and the Stations store, both loading the data from a different location. One returns search results, the other returns the user’s favorite stations. To achieve this, one of our stores will need to override the proxy defined on the model. apsoeSacRslsj p/tr/erheut.s Etdfn(PnasoeSacRsls,{ x.eiead.tr.erheutwww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 5/18
    • etn:x.aaSoe, xed Etdt.tr rqie:ad.oe.tto eurs PnamdlSain, mdl ad.oe.tto oe: PnamdlSain, / Oerdn temdlsdfutpoy / vriig h oe eal rx poy { rx: tp:jx, ye aa ul aasacrslsjo r: dt/erheut.sn, rae:{ edr tp:sn, ye jo ro:eut ot rsls } } }; ) apsoeSain.s p/tr/ttosj Etdfn(PnasoeSain { x.eiead.tr.ttos, etn:x.aaSoe, xed Etdt.tr rqie:ad.oe.tto eurs PnamdlSain, mdl ad.oe.tto oe: PnamdlSain }; ) In the S a c R s l sstore definition, we have overridden the proxy defined on the erheut S a i nmodel by providing a different proxy configuration. The store’s proxy is used when tto calling the store’s l a method instead of the proxy defined on the model itself. od Note that you could implement your server side to have one API for retrieving both search results and the user’s favorite stations in which case both stores could use the default proxy defined on the model, only passing different parameters to the request when loading the stores. Lastly, let’s create the RecentSongs store. apsoeRcnSnsj p/tr/eetog.s Etdfn(PnasoeRcnSns,{ x.eiead.tr.eetog etn:x.aaSoe, xed Etdt.tr mdl ad.oe.og, oe: PnamdlSn / Mk sr t rqieyu mdli yuae / ae ue o eur or oe f o r / ntuigEtJ 405 / o sn x S .. rqie:ad.oe.og eurs PnamdlSn }; ) Note that in the current version of Ext JS, the model property on a store doesn’t automatically create a dependency, which is why we have to specify r q i e in order to eurs be able to dynamically load the model. Also, for convention, we always try to pluralize the store names, while keeping the model names singular. Adding the stores and models to our applicationwww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 6/18
    • Now that we have defined our models and stores, it’s time to add them to our application. Let’s revisit our Application.js file. apApiainj p/plcto.s Etapiain{ x.plcto( .. . mdl:[Sain,og] oes tto Sn, soe:[Sain eetog erheut trs ttos, RcnSns, SacRsls] .. . }; ) Another advantage of using the new Ext JS 4 MVC package is that the Application will automatically load the stores and models defined in the s o e and m d l trs oes configurations. Then, it will create an instance for each store loaded, giving it a storeId equal to its name. This allows us to use the name of the store whenever we bind it to a data component like we did in our views, e.g. store: SearchResults. Applying the glue Now that we have our views, models and stores, it’s time to glue them together. You start by adding the views one by one to your viewport. This will make it easier to debug any wrong view configurations. Let’s go through the resulting viewport for the Panda app. Etdfn(Pnave.iwot,{ x.eiead.iwVepr etn:x.otie.iwot, xed EtcnanrVepr Your Viewport class will usually want to extend E t c n a n r V e p r . This will x.otie.iwot cause your app to take up all the available space in your browser window. rqie:[ eurs ad.iwNwtto Pnave.eSain, ad.iwSnCnrl Pnave.ogotos, ad.iwSainLs Pnave.ttosit, ad.iwRcnlPaeSrle Pnave.eetylydcolr, ad.iwSnIf Pnave.ogno ], We set up all the view dependencies in our viewport. This will allow us to use their xtypes, previously configured in our views using the a i sproperty. la lyu:i aot ft, iiCmoet fnto( { ntopnn: ucin) ti.tm ={ hsies xye ae tp: pnl, dceIes [ okdtm: { dc:o ok tp, xye ola tp: tobr, hih:8, egt 0 ies [ tm: { xye esain, tp: nwtto wdh 10 it: 5www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 7/18
    • } { , xye ogotos, tp: sncnrl hih:7, egt 0 fe:1 lx } { , xye opnn tp: cmoet, hm:ad<rItre Rdo tl Pnab>nent ai }] }, ] lyu:{ aot tp:bx, ye ho ain tec lg: srth }, ies [ tm: { wdh 20 it: 5, xye ae tp: pnl, lyu:{ aot tp:bx, ye vo ain tec lg: srth }, ies [ tm: { xye ttosit, tp: sainls fe:1 lx } { , hm:d, tl A hih:20 egt 5, xye ae tp: pnl }] } { , xye otie tp: cnanr, fe:1 lx , lyu:{ aot tp:bx, ye vo ain tec lg: srth }, ies [ tm: { xye eetylydcolr, tp: rcnlpaesrle hih:20 egt 5 } { , xye ogno, tp: snif fe:1 lx }] }] }; ti.alaet) hsclPrn(; } }; ) Since Viewport extends Container, and Containers can’t have docked items (yet), we have added a Panel as the single item of our viewport. We make this panel the same size as our viewport by defining a layout of f t i. In terms of architecture, one of the most important things to note here is the fact that we have not defined a layout-specific configuration in the actual views. By not defining properties likewww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 8/18
    • f e , w d h h i h in the views, we can easily adjust the application’s overall layout in lx it, egt one single place, adding to the maintainability and flexibility of our architecture. Application logic In Ext JS 3, we often added our application’s logic to the views themselves using handlers on buttons, binding listeners to subcomponents, and overriding methods on the views when extending them. However, just like you shouldn’t inline CSS styles in your HTML markup, it’s preferrable to separate the application’s logic from the view definitions. In Ext JS 4, we provide controlleres in the MVC package. They are responsible for listening to events fired by the views and other controllers, and for implementing application logic to act on those events. There are several benefits to this design. One benefit is that your application logic is not bound to instances of views which means we can destroy and instantiate our views, as needed, while the application logic continues processing other things, like synchronizing data. Additionally in Ext JS 3, you might have had many nested views, each adding layers of application logic. By moving the application logic to controllers, it is centralized, making it easier to maintain and change. Finally, the Controller base class provides you with lots of functionality, making it easier to implement your application logic. Creating our Controllers Now that we have the basic architecture for our UI, models and stores set up, it’s time to get in control of our application. We planned to have two controllers, Station and Song, so let’s create the definitions for them. apcnrle/tto.s p/otolrSainj Etdfn(Pnacnrle.tto { x.eiead.otolrSain, etn:x.p.otolr, xed EtapCnrle ii:fnto( { nt ucin) .. . }, .. . }; ) apcnrle/ogj p/otolrSn.s Etdfn(Pnacnrle.og,{ x.eiead.otolrSn etn:x.p.otolr, xed EtapCnrle ii:fnto( { nt ucin) .. . }, .. . }; ) When including the controllers in your application, the framework will automatically load the controller and call the i i method on it. Inside the init method, you should set up listeners nt for your view and application events. In larger applications, you might want to load additional controllers at runtime. You can do this by using the g t o t o l rmethod. eCnrlewww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 9/18
    • smAto:fnto( { oecin ucin) vrcnrle =ti.eCnrle(Aohrotolr) a otolr hsgtotolrnteCnrle; / Rmme t cl teii mto mnal / eebr o al h nt ehd auly cnrle.nt) otolrii(; } When you load additional controllers at runtime, you have to remember to call the i i nt method on the loaded controller manually. For the purposes of our example application, we’ll let the framework load and initialize our controllers by adding them to the c n r l e sarray in our application definition. otolr apApiainj p/plcto.s Etapiain{ x.plcto( .. . cnrles [Sain,og] otolr: tto Sn }; ) Setting up listeners Let’s start controlling some parts of our UI by using the c n r lmethod inside of the oto controller’s init function. apcnrle/tto.s p/otolrSainj .. . ii:fnto( { nt ucin) ti.oto( hscnrl{ ttosit:{ sainls slcinhne ti.nttoSlc eetocag: hsoSaineet }, esain:{ nwtto slc:ti.neSaineet eet hsoNwttoSlc } }; ) } .. . The c n r lmethod is passed an object where the keys are component queries. In our oto example, the component queries are just using the xtypes of our views. However, using these component queries, you can target very specific parts of your UI. To learn more about advanced component queries, you can refer to the API docs. Each query is bound to a listener configuration. Inside each listener configuration, we want to listen for the key which is the event name. The events available are the ones provided by the component that is targeted by your query. In this case, we use the s l c i n h n e eetocag event provided by Grid (from which our StationsList view extends) and the s l c event eet provided by ComboBox (from which our NewStation view extends). To find out which events are available for a particular component, you can look in the events section available for each component in the API docs.www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 10/18
    • The value in the listener configuration is the function that gets executed whenever that event fires. The scope of this function is always the controller itself. Let’s also set up some listeners in our Song controller. apcnrle/ogj p/otolrSn.s .. . ii:fnto( { nt ucin) ti.oto( hscnrl{ eetylydcolr:{ rcnlpaesrle slcinhne ti.nogeet eetocag: hsoSnSlc } }; ) ti.plcto.n{ hsapiaino( saintr:ti.nttoSat ttosat hsoSaintr, soe ti cp: hs }; ) } .. In addition to listening for the s l c i n h n eevent on our RecentlyPlayedScroller eetocag view, we also set up a listener for an application event here. We do this by using the on method on the a p i a i ninstance. Each controller has access to the application plctowww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 11/18
    • instance using the t i . p l c t o reference. hsapiain Application events are extremely useful for events that have many controllers. Instead of listening for the same view event in each of these controllers, only one controller listens for the view event and fires an application-wide event that the others can listen for. This also allows controllers to communicate with one another without knowing about or depending on each other’s existence. Our Song controller is interested in a new station being started because it needs to update the song scroller and song info whenever this happens. Let’s take a look at how the Station controller, which will be the one responsible for firing this s a i n t r application event, actually does this. ttosat apcnrle/tto.s p/otolrSainj .. . oSaineet fnto(eMdl slcin { nttoSlc: ucinsloe, eeto) ti.plcto.ievn(saintr slcin0) hsapiainfrEetttosat, eeto[]; } .. . We simply get the single selected item provided by the s l c i n h n eevent and eetocag pass it as the single argument when firing the s a i n t r event. ttosat Conclusion In this article, we have looked at the basic techniques of architecting your application. Of course, there is a lot to it, and in the next part of this series we will take a look at some more advanced controller techniques and continue wiring up our Panda app by implementing our controller actions and adding some more details to our views. Share this post: Leave a reply Written by Tommy Maintz Tommy Maintz is the original lead of Sencha Touch. With extensive knowledge of Object Oriented JavaScript and mobile browser idiosyncracies, he pushes the boundaries of what is possible within mobile browsers. Tommy brings a unique view point and an ambitious philosophy to creating engaging user interfaces. His attention to detail drives his desire to make the perfect framework for developers to enjoy. Follow Tommy on Twitter 0 Comments Joel Watson 1 year ago Thanks so much for this article! I’ve been waiting a long time for a more robust example of the MVC architecture in ExtJS 4, and it looks like we finally have that! While waiting for this, however, I’ve been trudging ahead, and it’s good to see that this article is more of a substantiation of what I’ve already been doing, rather than a complete overturning of it Thanks again! costa 1 year ago Do you have any source code that I could run or look at?www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 12/18
    • Thanks Yousif Atique 1 year ago I am always glad to see a new tutorial/guide for ExtJS4. Much appreciate this latest and greatest post around a much awaited topic of ‘architecting ExtJS4 apps’. I understand that there has been another article around this topic but was really looking for another one Thanks Tommy Maintz Sencha Employee 1 year ago @costa The source code for the app will be available with the next part in the series. The sample code already contains too much things that we haven’t discussed yet. Igor Astakhov 1 year ago Why does your Application.js have properties or .stores .models instead of the controllers same goes for the viewport it requires the views and not the controllers.. What are the advantages of doing it this way rather then the other way? Sean Adkinson 1 year ago This is excellent. We plan on moving to Ext4 soon, and this MVC example greatly helps me envision how our future application will act. I can’t wait! Loiane 1 year ago Best MVC example so far! ykey 1 year ago Probably would have never thought to use application events that way. Thanks for the article. dbrin 1 year ago Well done Tommy! Thank you. Ed 1 year ago Finally a thorough example! Thank you!!! One question… you mentioned: “The Application will automatically load the stores and models defined in the stores and models configurations. Then, it will create an instance for each store loaded, giving it a storeId equal to its name” Does that mean every store and model throughout the application must have a unique name? Or can we optionally use the fully namespaced name? Olivier Pons 1 year ago In your first code listing you wrote: app/view/StationsListwww.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 13/18
    • It’s app/view/StationsList.js Alex Lukin 1 year ago Well, this is good example, but what I really need is SIMPLE CRUD example with delete and update operations and some server backend code in Java or PHP or whatever. Could someone point me to such example? disi 1 year ago @Alex Lukin As a starting point or a case study, you may be interested by ralphschaer extdirectspring contribution: http://code.google.com/p/extdirectspring/wiki/Changelog#1.0.11_- _July_30,_2011 He recently published a maven archetype to create an app skeleton with ExtJs4, Spring 3.1, Jpa, Hibernate and Spring Security The learning curve may be steep, depending on your mileage and background but as been gratifying in my case and eyes opener. start from scratch in 3 steps 1 mvn archetype:generate -DarchetypeArtifactId=starter-archetype -DarchetypeGroupId=ch.ralscha -DarchetypeVersion=1.0.0 -DarchetypeRepository=http://ralscha.ch/archetypes -DgroupId=com.mycompany -DartifactId=mynewapp -Dversion=0.0.1 2 copy extjs4 files as instructed 3 mvn jetty:run The work is ongoing, bugs may still be left behind. Enjoy, PS: For others, please refrain whining before understanding the full scope of the project, and if you find any bugs please contribute positively. The owner/maintainer is responsive but I guess is doing this library on his spare time. Disclosure: I’m not affiliated with Ralscha and am currently using his library in a small project and have only praise to his contribution Sérgio Mesquita 1 year ago Thank you Tommy, for this tutorial. It help me a lot. I look forward for the source code. Olivier Pons 1 year ago Just a suggestion: from a basic point of view, “model” is where you define the data models, which means almost only columns definition, maybe not the way data is fetched. To keep this example simple, maybe adding a “default proxy” into the file “app/model/Station.js” is too much, and may be disconcerting. Sonya 1 year ago it’s very best example for understanding MVC in Extjs4www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 14/18
    • Igor Astakhov 1 year ago From personal experience when having the proxy in the Store definition instead of the Model you will run into deep waters with writers. User 1 year ago Please release the source code ASAP. Seeing things in small chunks may be helpful to some people but a working app that you can run an modify is as good or better than any tutorial. Plus, you add in all the ellipses which mess with the ability to properly create the files as you go along. maduks 1 year ago awsome!! at last some decent mvc example to follow and catch up with the pro`s Lazaros kosmidis 1 year ago First I’ll point my agreement with Igor’s ( Astakhov) comment (about the proxy s) and Second a wish for a Direct implementation.(I’m currently working on a variation (ExtDirect.php author J. Bruni) for ZendFramework ) Excellent job, should replace the equivalent source in Ext Docs. ASAP !! Dan Santner 1 year ago Excellent example! Thanks. A.T.McClain 1 year ago Great example. I have one small question on the code. At the end of your viewport’s initComponent() call, you call the superclass’s implementation with this.callParent(). In several of the other examples, the arguments are also relayed to the superclass implementation via this.callParent(arguments). What’s required or the best practice here? Thanks! - ATM Vincenzo 1 year ago Is the “columns” definition mandatory for a Store? Olivier Pons 1 year ago Yes the “columns” definition is mandatory for a Store. It’s called “model”. Example: 1Etdfn(G.tr.sr’ { x.eie‘SsoeUes, 2 etn:‘x.aaSoe, xed Etdt.tr’ 3 mdl ‘SmdlUe’ oe: G.oe.sr, 4 atLa:tu, uood re 5 poy { rx: 6 tp:‘jx, ye aa’ 7 ai { p: 8 cet: ‘j/sapdt/sr.snpp rae /sg/p/aauesjo.h? c, ’ 9 ra: ‘j/sapdt/sr.snppr, ed /sg/p/aauesjo.h?’ 10 udt: ‘j/sapdt/sr.snpp pae /sg/p/aauesjo.h? u, ’www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 15/18
    • 11 dsry ‘j/sapdt/sr.snppd eto: /sg/p/aauesjo.h?’ 12 }, 13 rae:{ edr 14 tp:‘sn, ye jo’ 15 ro:‘aa, ot dt’ 16 scesrpry ‘ucs’ ucsPoet: sces 17 } 18 } 1 }; 9 ) Vincenzo 1 year ago This is an incomplete example. This is an idea. This is a concept. Just now it is something that feed condusion. I think that a smaller working example would me more appreciated. I will try to rearrange some Panel-Store-Model using this new paradigm. I think it will not work. Olivier Pons 1 year ago Here’s my “app/model/User.js” 1Etdfn(G.oe.sr,{ x.eie‘SmdlUe’ 2 etn:‘x.aaMdl, xed Etdt.oe’ 3 fed:[i’‘ae,‘mi’ ils ‘d,nm’ eal] 4}; ) LoreZyra 1 year ago I agree with the “User” above that requested “release the source code.” If this were a class room, the code would be available in it’s entirety while the instructor fed the students piecemeal. The more advanced students would simply skip ahead. So, why not offer the full source and then explain everything in sections (as you have done above)? Olivier Pons 1 year ago Maybe because it’s not finished? Or not clean (yet)? John Wilander 1 year ago I agree it’s frustrating not to have a working example to start from. Some questions: 1. Should the viewport code go in the app/view/Viewport.js file as seen in Part 1? It doesn’t really say but I guess so. 2. What’s with the this.callParent() in the Viewport? I get “Uncaught TypeError: Cannot call method ‘getCount’ of undefined” when it’s called (layoutCollection.getCount() on line 28500 in ext-all-debug). Maybe some view configuration is missing? Have anyone else here figured these things out? Thanks! /John IL 12 months ago Controller and events fired by View is good. But where’s the ROUTES? How to response the back button on browsers, and other history changing?www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 16/18
    • Steve 12 months ago One thing I find very frustrating with ExtJs is that it seems like it has been reserved for people with bigger smarter brains than mine and you guys almost know that. Its like 5 steps to get your app up and running. Step 1 Step 2 Step 5 What happened to step 3 & 4? sakoleiro 11 months ago i`m waiting and waiting for new part nextSTEP 11 months ago Hi Tommy, when will the next part be published? drabslab 10 months ago Please release the source code, or has it already and did i miss it? James Pearce Sencha Employee 10 months ago @sakoleiro, @nextSTEP, @drabslab - I recommend you sign up for our newsletter (the signup, below here, to the right). In the meantime, try changing the ‘2’ at the end of the URL to ‘3’ http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3 Casvan Marcel 9 months ago Sencha Touch may be good, but your lack of documentation and tutorials and good simple to understand examples make it sooo frustrating to learn and use that the majority of programmers that stumble across it run away from it. Until you change that fact, Sencha Touch will remain that misterious application framework that most of us never managed to learn and use. Reading on so many comments, I think I speak in the name of everybody. I write this to you in hope that you’ll read it and do something about it,and in the future we can actually use Sencha Touch in our apps. Best regards Olivier Pons 9 months ago @Casvan Marcel: you’re perfectly right. I’ve given up on the MVC for now. Maybe it should be better to have a binary behavior: either the full documentation or nothing. @James Pearce: I’ve tried changing the ‘3’ at the end of the URL to ‘4’ and it gave me a 404 nextSTEP 9 months ago There is no fourth part… so..? Olivier Pons 9 months ago You’re right, that’s what I meant: what’s the point of explaining something and not finishing it?www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 17/18
    • I’d better have nothing than just part 1, 2 and 3 without the most important = part 4. Chad Whitacre 9 months ago Loving the tutorial so far, but don’t JSON strings need to use double quotes and not single quotes? Sunil Pratap 9 months ago Very nice examples and sample application to demonstrate the MVC pattern in Ext JS4. I’m curious to know, how to implement a multi-module application, which have separate entry point for each module and which may or may not be linked together. Should we have the directory structure like, Pandora/app/view/<module1>/<view files> etc. and Pandora/app/<module-application.js>, Pandora/app/view/<module1>/viewport.js to implement that and accordingly use namespace for different components? any help is greatly appreciable. Don 9 months ago Just wanna point out two mistakes. One filename is missing a .js at the end. And JSON does not supports single quotes. http://jsonlint.com/ markes them as errors (and my ide too). JSON needs double quotes. Commenting is not available in this channel entry. Find Sencha developers at SenchaDevs © 2012 Sencha Inc. All rights reserved.www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/ 18/18