Results 1 to 4 of 4

Thread: MVC Data and View help

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    3
    Vote Rating
    1
      0  

    Exclamation Answered: MVC Data and View help

    Hi all,

    First of all, I am new to the Sencha community, but not new to programming. I am highly impressed with Sencha Touch and the community of developers here. The documentation is top notch and it seems like a great community.

    I am working on building a prototype for e-learning on mobile devices and have been consistently running into a barrier with Sencha and have not yet been able to wrap my head around it.

    My question is in regards to programming with Sencha Touch in MVC. I prefer coding in the MVC style and was drawn to Sencha initially because of it's MVC design. However, I am having some major issues understanding how to access data across the application. I have read the documentation, watched and read tutorials and walkthroughs, read the Ext.js 4 book on data and MVC (which is the same base between Ext.js 4 and Sencha Touch), and searched the forums for days to help, but have come up empty. As such I am here to post.

    Here are the specifics of my problem. I have an .xml file that has data in it. I would like to read that data into my program and use it to populate content within a series of panels. I have my app.js, controller, a couple views, model and stores setup. I can read the data from the store into a list or data grid by using the store parameter, but I cannot find a way to access a specific record in the store and get it's contents to pass it to a panel's html or a tool bar header etc.

    I am sure I am missing some fundamental element, but would really appreciate any help or advice anyone could provide. I am not opposed to research so please don't hesitate to offer whatever guidance you can provide.

    Here are my sets of code so far:

    My basic xml file for now.

    Code:
    <?xml version="1.0" encoding="UTF-8"?><course>
        <title></title>
        <pages>
            <page>
                <id>010101</id>
                <title>Page 1</title>
                <url>assets/pages/010101.html</url>
            </page>
            <page>
                <id>010102</id>
                <title>Page 2</title>
                <url>assets/pages/010101.html</url>
            </page>
            <page>
                <id>010103</id>
                <title>Page 3</title>
                <url>assets/pages/010101.html</url>
            </page>
        </pages>
    </course>
    app.js

    Code:
    Ext.regApplication({    name: 'app',
        useLoadMask: true,
        
        launch: function() {
            
            console.log('Application Registered');
            
            // Launch Course with index action on Controller.
            Ext.dispatch({
                
                controller: app.controllers.courseController,
                action: 'index',
            });
            
        },
    });
    Controller (hoping to get data here and pass it to views)

    Code:
    app.controllers.courseController = new Ext.Controller({     
        // index action
        index: function(options)
        {
            console.log('Controller Registered!');
            
            // Instantiate main wrapping viewport
            app.views.viewport = new app.views.viewport();
        },
        
        dataLoaded: function(options){
            
            console.log('Data is Loaded');
            
            var store = Ext.getStore('pagesStore');
            
        }
    });
    model

    Code:
    app.models.pages = Ext.regModel('pages', {    fields: [
            {name: 'id', type: 'int' },
            {name: 'title', type: 'string' },
            {name: 'url', type: 'string' }
        ],
        
        getRecord: function(){
            console.log(data);    
        }
        
    });
    Store

    Code:
    app.stores.pagesStore = Ext.regStore('pagesStore', {    
        model: 'pages',
        
        proxy: {
            
            type: 'ajax',
            url : 'assets/xml/course.xml',
            
            reader: {
                type: 'xml',
                root: 'pages',
                record: 'page'
            },
            
            autoload: true
        }
    });
    
    
    app.stores.pagesStore = Ext.StoreMgr.get('pagesStore');
    Thanks!

  2. Thank you for the reply!

    The main solution to my problem for the moment is that I need to listen for the store to be fully loaded before trying to access the records individually. I was thrown off because I could see the object and navigate to the records in the console.

    The actual solution to this part can be found here:

    http://www.sencha.com/forum/showthre...cords-in-store

    Thanks mitchellsimoens

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,317
    Answers
    3883
    Vote Rating
    1291
      0  

    Default

    How are you wanting to get the record? You can use one of the find method on the store or if you want a certain index you can use getAt. Once you get the record you can use the get method to get a field's value.

    Also, MVC between Ext JS 4 and Sencha Touch 1 is very different.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    3
    Vote Rating
    1
      0  

    Default

    Thank you for the reply!

    The main solution to my problem for the moment is that I need to listen for the store to be fully loaded before trying to access the records individually. I was thrown off because I could see the object and navigate to the records in the console.

    The actual solution to this part can be found here:

    http://www.sencha.com/forum/showthre...cords-in-store

    Thanks mitchellsimoens

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,317
    Answers
    3883
    Vote Rating
    1291
      0  

    Default

    An array and object are just references so if the array/object is updated somewhere, the other references will be updated so the reference in the console will be updated when the store loads.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •