MVC Data and View help

[swardson]

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.

<?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

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)

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

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

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!

[mitchellsimoens]

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.

[swardson]

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

[mitchellsimoens]

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.