1. #1
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default TabPanel, List & Forms

    TabPanel, List & Forms


    Hi Sencha Touch People

    I've started using ST ver 2.0. I'm wondering if someone could assist in directing me in the right direction.
    I have a tabpanel with 2 panels. This first contains a JSON list [List], the second a form [Settings]. I'd like to "submit" my changed settings via ajax to the script and receive a JSON formatted response back to my List tab. ie it should replace the list currently on the List tab. Is this possible?

    If anyone could direct me further ...it would be appreciated.

    So far I have...

    Code:
    Ext.application({
        name: 'Sencha',
    
    
        launch: function() {
    
    
            Ext.define('Movies', {
                extend: 'Ext.data.Model',
                  fields: [
                        // movie details
                    {name: 'movie_name', type: 'string'},
                    {name: 'actor_1',    type: 'string'},
                    {name: 'actor_2',    type: 'string'},
                    {name: 'director',   type: 'string'},
                    {name: 'genre',      type: 'string'},
                    {name: 'begin',      type: 'string'},
                    {name: 'end',        type: 'string'},
                    {name: 'rating',     type: 'string'},
                    {name: 'score_1',    type: 'string'},
                    {name: 'score_2',    type: 'string'},
                    {name: 'summary',    type: 'string'},
                    {name: 'duration',   type: 'string'},
                        // channel details
                    {name: 'channel_name',  type: 'string'},
                    {name: 'channel_short', type: 'string'},
                    {name: 'channel_number',type: 'string'}
                ]
            });
            
            var itemTemplate = new Ext.XTemplate(
                '<tpl for=".">',
                    '{begin} <b>{movie_name}</b> {channel_short} [{channel_number}]',
                '</tpl>'
            );
    
    
            var store = Ext.create('Ext.data.Store', {
                model: 'Movies',
                storeId: 'cStore',
                proxy: {
                    type: 'ajax',
                    url: 'movies.json',
                    reader: {
                        type: 'json'
                    }
                },
                autoLoad: true
            });
    
    
            var MovieList = new Ext.List({
                title: 'Movies',
                store: store,
                itemTpl: itemTemplate
            });
    
    
            MovieList.on('itemtap',function(dataView,index,item,e){
                var store   = dataView.getStore();
                var name    = store.getAt(index).data.movie_name;
                var summary = store.getAt(index).data.summary;
                //var popup   = new Ext.Panel({
                var popup    = Ext.create('Ext.Panel', {
                    modal:true,
                    centered:true,
                    floating:true,
                    width:500,
                    height:220,
                    //style: 'background-color: #BAE4FF',
                    styleHtmlContent: true,
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            title: name
                        }
                    ],
                    html:'</br><div style="margin-bottom:10px;color:#d3d3d3;"><p>Summary... ' + summary + "</p></div>"
                });
                popup.show();
            });
    
    
            var About = new Ext.Panel({
                title: 'About',
                html: 'About text goes here ...'
            });
    
    
            var bundle_ddn = new Ext.field.Select({
                name: 'bundle_ddn',
                label: 'Bouquet:',
                options:[
                                        { text:'DStv Compact',          value: '3' },
                                        { text:'DStv EasyView',         value: '7' },
                                        { text:'DStv Lite',             value: '6' },
                                      //  { text:'DStv Premium',          value: '1' },
                                      //  { text:'DStv Select 1',         value: '4' },
                                      //  { text:'DStv Select 2',         value: '5' },
                                      //  { text:'SABC 1/2/3/e.tv',       value: '2' },
                                      //  { text:'DStv Select 2',         value: '5' },
                                      //  { text:'TopTV Ultimate Movies', value: '14' },
                                        { text:'TopTV Variety',         value: '11' }
                            ]
            });
    
    
            var formBase = {
                scroll: 'vertical',
                title: 'Settings',
                url   : 'http://riyaad-millers-imac.local/cgi-bin/myform.cgi',
                //standardSubmit : true, // usually false!
                items: [ bundle_ddn
                    /*{
                        items: [
                        {
                            xtype:'selectfield',
                            name: 'bundle_ddn',
                            label: 'Bouquet',
                            options:[
                                        { text:'DStv Compact',          value: '3' },
                                        { text:'DStv EasyView',         value: '7' },
                                        { text:'DStv Lite',             value: '6' },
                                        { text:'DStv Premium',          value: '1' },
                                        { text:'DStv Select 1',         value: '4' },
                                        { text:'DStv Select 2',         value: '5' },
                                        { text:'SABC 1/2/3/e.tv',       value: '2' },
                                        { text:'DStv Select 2',         value: '5' },
                                        { text:'TopTV Ultimate Movies', value: '14' },
                                        { text:'TopTV Variety',         value: '11' }
                            ]
                        }, {
                            xtype:'selectfield',
                            name: 'yob_ddn',
                            label: 'Movies made since',
                            options:[
                                        { text:'1920', value: '1920' },
                                        { text:'1930', value: '1930' },
                                        { text:'1940', value: '1940' },
                                        { text:'1950', value: '1950' },
                                        { text:'1960', value: '1960' },
                                        { text:'1970', value: '1970' },
                                        { text:'1980', value: '1980' },
                                        { text:'1990', value: '1990' },
                                        { text:'2000', value: '2000' },
                                        { text:'2010', value: '2010' }
                            ]
                        },{
                            xtype:'selectfield',
                            name: 'options',
                            label: 'Movies rated at least',
                            options:[
                                        { text:'Avoid',     value: 'Avoid' },
                                        { text:'Test',      value: 'Test'},
                                        { text:'Ho-hum',    value: 'Ho-hum' },
                                        { text:'Ok',        value: 'Ok' },
                                        { text:'Good',      value: 'Good' },
                                        { text:'Excellent', value: 'Excellent' }
                            ]
                        },
                        {
                            xtype: 'textfield',
                            name : 'name',
                            label: 'Name',
                            useClearIcon: true,
                            autoCapitalize : false
                        }, {
                            xtype: 'passwordfield',
                            name : 'password',
                            label: 'Password',
                            useClearIcon: false
                        }, {
                            xtype: 'emailfield',
                            name : 'email',
                            label: 'Email',
                            placeHolder: 'you@sencha.com',
                            useClearIcon: true
                        }, {
                            xtype:'selectfield',
                            name: 'options',
                            label: 'Option',
                            options:[
                                        { text:'This', value: 'this' },
                                        { text:'That', value: 'that' },
                                        { text:'Some', value: 'some' }
                            ]
                        }]
                    }*/
                ],
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        items: [
                            {
                                text: 'Load Defaults',
                                ui: 'round',
                                handler: function() {
                                    formBase.user = Ext.ModelMgr.create({
                                        'name'    : 'Akura',
                                        'password': 'secret',
                                        'email'   : 'saru@sencha.com',
                                        'options' : 'That'
                                    }, 'User');
    
    
                                    form.loadModel(formBase.user);
                                }
                            },
                            {xtype: 'spacer'},
                            {
                                text: 'Reset',
                                handler: function() {
                                    form.reset();
                                }
                            },
                            {
                                text: 'Save',
                                ui: 'confirm',
                                handler: function() {
                                    var model = Ext.ModelMgr.create(form.getValues(),'User');
    
    
                                    var errors = model.validate(),message = "";
                                    if(errors.isValid()){
    
    
                                        if(formBase.user){
                                        form.updateRecord(formBase.user, true);
                                        }
                                        form.submit({
                                            waitMsg : {message:'Submitting', cls : 'demos-loading'}
                                        });
    
    
                                    } else {
                                        Ext.each(errors.items,function(rec,i){
                                            message += rec.message+"<br>";
                                        });
                                        Ext.Msg.alert("Validate", message, function(){});
                                        return false;
                                    }
                                }
                            }
                        ]
                    }
                ]
            };
    
    
            Ext.create('Ext.tab.Panel', {
                fullscreen: true,
                items: [ MovieList, formBase, About ]
            });
    
    
        } // function end

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you return data in your Ext.Ajax call that you want to then use for your List you can use the loadData on the Store for your list.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  3. #3
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default


    Hi Mitchell Simoens

    I've consulted various sites and examples. To date, nothing completely helpful (always fragmented). Is there any way you could possibly show me an example or more conclusive documentation regarding this. Any help would be appreciated. I'm new to JavaScript and ST.

    Thx,
    Riyaad

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    Ext.Ajax.request({
        url : 'somewhere.php',
        params : {.....},
        success: function(response) {
            var json = Ext.decode(response);
    
            list.getStore().loadData(json);
        }
    });
    Something like that, just typing from memory
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  5. #5
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default


    Thank you Mitchell Simoens

    Exactly what I needed to get me to the next step

Thread Participants: 1

Tags for this Thread