1. #1
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    144
    Vote Rating
    7
    rbraddy is on a distinguished road

      5  

    Default Success with Sencha Architect

    Success with Sencha Architect


    After struggling initially to develop my ExtJS 4.1 app using Sencha Architect, I thought I would share my experiences after about 30 days of consistent usage.

    First, it took me about two weeks to truly get past the initial learning curve on ExtJS 4 MVC, so I would add that learning both Sencha Architect and MVC at the same time compounds the learning; however, the patient and responsive support I received from the SA architect and forum members during that critical first two weeks enabled me to keep making forward progress, not get discouraged, and finally reach a tipping point of productivity at about the 10 day point. Many thanks to all who assisted me.

    Second, I have found that Sencha Architect 2.1 is actually very stable and productive. One of the most important lesson learned for me was understanding how References and ComponentQuery works in 4.1. This really is one of the keys to harnessing the power of SA controllers.

    Additionally, I may have taken a slightly different approach to my application architecture than most. Instead of creating one big, monolithic ExtJS application, I chose to break my application into smaller, standalone "applets" (that's what I call them). Each applet is a standalone SA project and distinct ExtJS application. It can run standalone or be integrated into my overall application navigation framework.

    I believe that this modular approach is perfect for Sencha Architect, as each application and project is smaller and focused as a result. Admittedly, I'm not thrilled with how I had to integrate the various applets into the application framework (using iframes), but it works and for the most part works extremely well.

    My application is implemented as a top level framework with a typical east/west border layout, where the east panel contains a tree control (as shown below). The tree control is used to navigate to various functions. When the user clicks on an item in the tree, it opens an "iframe tab" in the west panel, which loads the applet (SA-generated application).

    app-framework.jpg


    For anyone interested, I started with this iframe application framework, which works like a charm.

    I'm sure the iframe/applet architecture isn't for everyone or every situation, but it's worked out great for building a modular, large application using ExtJS and Sencha Architect. In some ways, it's very similar to how the ExtJS Documentation application is structured (using iframes).

    In any event, there's a lot to like about Sencha Architect, especially for visually prototyping and designing the UI prior to coding it. Now that I'm over the learning curve, I honestly don't want to develop rich Internet apps any other way.

    My productivity continues to increase each week, and the ability to quickly clone an entire app (or applet, in my case) and then visually modify it to create the next applet is a real time saver. And since I don't have a huge, monolithic app to deal with, debugging and development is faster and easier using SA with lots of smaller applets.

    Many thanks to the Sencha Architect team for hanging tough through many iterations of this technology, from the early Designer phase and SA 1 to SA 2.1, and for the support here on the Sencha forums.

    Sencha Architect 2.1 is a real winner! I'm very glad I made it past the initial learning curve and didn't give up early on. The initial investment of time learning to use SA and MVC effectively was definitely worth it.

    Rick

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,064
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Rick -

    Thanks for sharing your experience. We have new stuff in the pipeline that will continue to help you.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,843
    Vote Rating
    57
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      1  

    Default


    Multi project support: yes please!

    /blushing

    One of the most important lesson learned for me was understanding how References and ComponentQuery works in 4.1. This really is one of the keys to harnessing the power of SA controllers.
    Can't really take credit for the controllers as they belong to the framework however we certainly do encourage their use. We need a bad ass component query guide that's for sure
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    6
    Vote Rating
    0
    kenzominang is on a distinguished road

      0  

    Default m...

    m...


    I have try SA for 2 week and it's really hard to learn.
    If I buy a SA, is there any step by step tutorial to built an application in the software bundle? Because, I think a complete tutorial is very helping a potential user to buy, especially a video tutorial....

  5. #5
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,843
    Vote Rating
    57
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    6
    Vote Rating
    0
    kenzominang is on a distinguished road

      0  

    Default Thank...

    Thank...


    Thank Phil.Strong...
    I won't give up. If this make my work easier, I will buy one...

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    6
    Vote Rating
    0
    kenzominang is on a distinguished road

      0  

    Default


    I found this video is very helpful to me. And I suggest other newbie to ExtJS should see this video http://vimeo.com/33311074 to take deep understanding about MVCS.

    Hi Phil.Strong, would you please point me to the url (example) how to implement multi level selection using SA or ExtJS?
    Just an example of data:
    Code:
    Continent  | Country | Province/State
    America    | US      | State A
    America    | US      | State B
    America    | US      | State C
    America    | Mexico  | Province A
    Asia       | Japan   | Province A
    Asia       | Japan   | Province B
    Asia       | Japan   | Province C
    Asia       | China   | Province A

  8. #8
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    65
    Vote Rating
    0
    Peter Tierney is on a distinguished road

      2  

    Default


    I whole heartedly agree that SA2 is worth the time spent to learn. I've been developing Flex/AIR apps for 8+ years and MVC is used extensively once you need to build a large application. The biggest hurdle for me to figure out was how ExtJs and Architect glued/wired the views with the controllers; once you find references and the ComponentQuery everything else is cake.


    Architect team, definitely nice touch of having getters and setters automatically generated from references along with numerous other niceties.


    I second that it would also be nice to have a way to do what the rbraddy did without iFrames. Another great bit would be to have a way to define a project that has only stores and models making it possible to reuse that project across a desktop app and mobile apps. It might be possible to do controllers in the same fashion, but only controllers without direct view linkages.


    Everything is nice until you want to style anything past any of the basic themes. Yes I know you can use SASS and Compass and that helps the situation, but true UI design is a visual art. If ExtJs apps are ever to get past the dated Windows XP look, and Neptune isn't much better, then a GOOD VISUAL TOOL for styling the components will have to be available especially if you have designers who have no interest in learning CSS (and who can blame them). I've entertained the thought of creating this app for myself, but haven't found the time, yet. It is best to focus on the guts of the framework first, but to make any UI framework have great adoption, is to have a good if not GREAT styling tool.


    Continue the good work!!

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
    cswsteve is on a distinguished road

      0  

    Default


    I also agree that SA2 is a great tool. I have been using it for a few months now and the more I use it the more it impresses me. I have done years of WinForm development using C# and SA2 is as good as the WinForm designer in Visual Studio 2010. In many ways SA2 is better but there are some features of the VS2010 designer that I wish were in SA2 like snap lines and the ability to select multiple controls at once. I almost always use the Absolute Layout for my views as I create very complex views and want complete control over where each component goes.

    I have to admit I have not used any controller references as I have been able to directly connect to components using a Controller Action and a components itemId. However, after reading this post I am wondering if I am doing it right so let me explain how I have been doing it so far.
    1. Create a new view by adding a Form Panel to the Views in the Project Inspector.
    2. Select the view (form panel) and set the userAlias config to “mytestform”.
    3. Set the form panels userClassName to “MyTestForm”.
    4. Next, add a Button to the Form Panel.
    5. Set the buttons itemId (not the Id) in the config to “btnClose”. (Text Case matters in all these names)
    6. Create a new controller and add click the + in the Actions config and select Controller Action.
    7. Select Ext.button.Button for the target type.
    8. Select Click for the event name.
    9. Select the new Controller Action in the Project Inspector. (it will be named click onButtonClick)
    10. In the controlQuery config type the following exactly. mytestform #btnClose
    11. Switch to Code view and enter some code like alert("button clicked");
    12. Save and run the project and that controller will only respond when that specific btnClose button is clicked on the mytestform view.
    Is the above approach ok or should I look into creating a bunch of references for all the buttons I need to control? I have forms with over a dozen buttons and dozens of text and combo boxes. I want to keep the controllers as simple and clean as possible but I don't want to overlook a better way of doing things.

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    65
    Vote Rating
    0
    Peter Tierney is on a distinguished road

      0  

    Default


    Actions on buttons is definitely something to do, but controllers can be a lot more than just action holders. In your example lets assume you defined mytestform as the itemId making the selector in your ref #mytestform and the ref form. The actual code looks like

    Code:
    refs: [
       {
           ref: 'form',
           selector: '#mytestform'
       }
    ],
    now anywhere in the controller you can do
    this.getForm()
    and you have a handle to the form and is an example of the auto created getter/setters for references. This allows you to not have to get the form by other means like
    button.up('form').getForm()
    which is parent/child dependent. You have a ref, use it and move on without concern about the DOM hierarchy.

    This is a simple example, but it comes down to style and/or convenience.