Form + nested list not showing after submit

Question

I'm just learning sencha touch 2, MVC. I would to make a simple form that get a value, pass to a PHP file (for an API call to a web-service), move to a Nested List and show results. But, my app doesn't show nothing after submit... Value is captured correctly (I see it in console log). Please someone could me help?

Consider for testing that for now I don't pass value, and my API call calls directly with a hard-coded value. In future I'll work to pass form value...

Thank you in advance!

This is "app.js"

Ext.application({
  name:                     'Appre',
  icon:                     'resources/icons/icon.png',
  phoneStartupScreen:   'resources/images/phone_startup.png',
  //tabletStartupScreen: 'tablet_startup.png',
  glossOnIcon:          false,
  //profiles:           ['Phone', 'Tablet'],
  views :       ['Viewport','SearchCap','ElencoRistoranti'],
  models:           ['ElencoRistoranti'],
  stores:           ['RistorantiCap'],
  controllers:  ['SearchCap'],
  viewport: {
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left',
            duration: 300
        }
    }
},
launch: function() {
    Ext.create('Appre.view.Viewport')
} // launch: function() {
}) // Ext.application

This is form "search cap"

Ext.define('Appre.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
config: {
    items: [{
        xtype: 'fieldset',
        layout: 'vbox',
            items: [{
                xtype: 'textfield',
                name: 'cap',
                placeHolder: 'Cap' 
            },
            {
                xtype: 'button',
                text: 'Cerca',
                action :'searchCap',
                id:'btnSubmitLogin'
            }] // items
    }] // items
}, // config
initialize: function() {
    this.callParent(arguments);
    console.log('loginform:initialize');
}
});

This is controller

Ext.define('Appre.controller.SearchCap', {
extend : "Ext.app.Controller",
config : {
    refs : {
        btnSubmitLogin: 'button[action=searchCap]',
        form : 'appre-searchCap'
    },
    control : {
        btnSubmitLogin : {
            tap : "onSubmitLogin"
        }
    }
},
onSubmitLogin : function() {
    console.log("onSubmitLogin");
    var values = this.getForm().getValues();
    console.log(values);
    var $this=this;
    Ext.Ajax.request({
        url: 'cerca-ristoranti-cap.php',
        method: 'POST',
        params: {
            values: Ext.encode({form_fields: values})
        },
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            //Ext.Msg.alert('Contact Complete!', obj.responseText);
            $this.resetForm();
            Ext.Viewport.add(Ext.create('Appre.view.ElencoRistoranti'));
            Ext.Viewport.setActiveItem(Ext.create('Appre.view.ElencoRistoranti'));
        },
        failure: function(response, opts) {
            console.log('server-side failure with status code ' + response.status);
        }
    });
},
resetForm: function() {
this.getForm().reset();
},
    launch : function() {
        this.callParent();
        console.log("LoginForm launch");
    },
    init : function() {
        this.callParent();
        console.log("LoginForm init");
    }
});

And this is Nested List

Ext.define('Appre.view.ElencoRistoranti', {
extend: 'Ext.Panel',
xtype: 'appre-elencoristoranti',
config: {
    xtype: 'nestedlist',
    title: 'Cap',
    displayField: 'name',
    store: {
        type: 'tree',
        fields: [
            'id_restaurant', 'name',
            {name: 'leaf', defaultValue: true}
        ],
        root: {
            leaf: false
        },
        proxy: {
            type: 'ajax',
            url: 'cerca-ristoranti-cap.php',
            reader: {
                type: 'json',
                rootProperty: 'restaurants'
            } //reader
        } // proxy
    },
    detailCard: {
        xtype: 'panel',
        scrollable: true,
        styleHtmlContent: true
    },
    listeners: {
        itemtap: function(nestedList, list, index, element, post) {
            this.getDetailCard().setHtml(post.get('name'));
        }
    }
} // config
});

cerca-ristoranti-cap.php it's a simple function that returns an array like this:

{
"restaurants":[{
    "id_restaurant":"40",
    "name":"La Saliera",
    "zip":"00128",
    "lat":"41.7900229",
    "lgt":"12.4513128"
}, {
    "id_restaurant":"64",
    "name":"Osteria del Borgo",
    "zip":"00128",
    "lat":"41.7887363",
    "lgt":"12.5149867"
}]

}

Answer 1

Hi @sineverba sorry for response a little late, but here something this how you want show,

Viewport.js

Ext.define('myapp.view.Viewport' , {
  extend : 'Ext.viewport.Default',
  xtype : "viewport",
  config: {
    fullscreen: true,
    styleHtmlContent: true,
    style: 'background:#ffffff;',
    layout : 'card',
    autoDestroy : false,
    cardSwitchAnimation : 'slide',

    items: [
       {
          xtype: 'appre-searchCap'
       },
    ],
  }
})

app.js

Ext.Loader.setConfig({
  enabled: true
})

Ext.application({
    name: 'myapp',
    requires: [
         'myapp.view.SearchCap',
         'myapp.view.ElencoRistoranti',
         'myapp.view.SearchElenco',
    ],
    controllers: ['SearchCap'],
    models: ['myapp.model.SearchCapModel'],
    launch: function() {
         Ext.create('myapp.view.Viewport')
    }
});

SearchCapModel.js

Ext.define('myapp.model.SearchCapModel', {
    extend: 'Ext.data.Model',
    config: {
         idProperty: 'id_restaurant',
         fields: [
             { name: 'id_restaurant', type: 'string' },
             { name: 'name', type: 'string'},
             { name: 'zip', type: 'string' },
             { name: 'lat', type: 'string'},
             { name: 'lgt', type: 'string'}
        ],
   }
})

SearchCapStore.js

Ext.define('myapp.store.SearchCapStore', {
    extend: 'Ext.data.Store',
    config: {
         model: 'myapp.model.SearchCapModel',
         autoLoad: true,
         proxy: {
             type: 'ajax',
             url : 'cerca-ristoranti-cap.json',
             reader: {
                   type: 'json',
                   rootProperty: 'restaurants'
             } //reader
         },
   }
});

SearchCap.js

Ext.define('myapp.controller.SearchCap', {
    extend : "Ext.app.Controller",

    views: ['SearchElenco'],

    config : {
         refs : {
             elencoListContainer: 'elencolistcontainer',
             btnSubmitLogin: 'button[action=searchCap]',
             form : 'appre-searchCap',
         },
         control : {
               btnSubmitLogin : {
                      tap : "onSubmitLogin"
               }
         }
    },
    onSubmitLogin : function() {
            console.log("onSubmitLogin");
            var values = this.getForm().getValues();
            console.log(values);

            Ext.Ajax.request({
                    url: 'cerca-ristoranti-cap.json',
                    method: 'POST',
                    params: {
                         values: Ext.encode({form_fields: values})
                    },
                    success: function(response, opts) {
                            var obj = response.responseText;
                            Ext.Msg.alert('Contact Complete!', obj);
                            Ext.Viewport.add(Ext.create('myapp.view.SearchElenco'));
                            Ext.Viewport.setActiveItem(1);
                    },
                    failure: function(response, opts) {
                          console.log('server-side failure with status code ' + response.status);
                    }
            });
    },
    resetForm: function() {
            this.getForm().reset();
    },
    launch : function() {
            this.callParent();
            console.log("LoginForm launch");
    },
    init : function() {
            this.callParent();
            console.log("LoginForm init");
    }
});

SearchElenco.js

Ext.define('myapp.view.SearchElenco', {
    extend: 'Ext.Container',
    xtype: 'elencolistcontainer',

    requires: ['myapp.store.SearchCapStore'],

    initialize: function() {
            this.callParent(arguments);

            var s = Ext.create('myapp.store.SearchCapStore')
            var notesList = {
                    xtype: 'appre-elencoristoranti',
                    store: Ext.getStore(s).setAutoLoad(true),
                    listeners: {
                           disclose: {
                                    fn: this.onNotesListDisclose,
                                    scope: this
                           }
                    }
            };
            this.add([notesList])
    },
    onNotesListDisclose: function(list, record, target, index, event, options) {
            console.log('editNoteCommand');
            this.fireEvent('editNoteCommand', this, record);
    },

     config: {
           layout: {
                 type: 'fit'
           }
     }
});

ElencoRistoranti.js

Ext.define('myapp.view.ElencoRistoranti', {
    extend: 'Ext.dataview.List',
    xtype: 'appre-elencoristoranti',
    id: 'appreElenco',

    config: {
       emptyText: '<pre><div class="notes-list-empty-text">No list found.</div></pre>',
       onItemDisclosure: false,
       itemTpl: '<pre><div class="list-item-title">{id_restaurant}</div><div class="list-item-narrative">{name}</div></pre>',
    }
});

SearchCap.js - View

Ext.define('myapp.view.SearchCap', {
    extend: 'Ext.form.Panel',
    xtype: 'appre-searchCap',
    id: 'appreSearchCap',

    config: {
          layout: {
                type: 'vbox',
          },
          items: [
               {
                 xtype: 'fieldset',
                 title: 'Cap',
                 instructions: 'Enter Cap',
                 items: [
                     {
                        xtype: 'textfield',
                        name: 'cap',
                        placeHolder: 'Cap' 
                     },
                     {
                        xtype: 'button',
                        text: 'Cerca',
                        ui: 'confirm',
                        action :'searchCap',
                        id:'btnSubmitLogin'
                     }
                 ] // items
              }
         ] // items
    }, // config
    initialize: function() {
            this.callParent(arguments);
            console.log('loginform:initialize');
    }
});

I hope help you and if you have a dude please let me know. :)