How To Have The Slide Multiple Screens In Sench Touch

I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window

Solution 1:

Ok,

SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results. In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.

• First let's instantiate the jobsList

// It has the id ( id: 'jobsListId')

var jobsList = new SearchJobsForm.jobsList();

• then you should put all your inputs into a form (xtype : formpanel, id: 'searchFormId')
• And add the resultPanel just after the form

Here is the code

SearchJobsForm.form = Ext.extend(Ext.Panel,{

    initComponent: function(){

        Ext.apply(this, {
            id: 'searchForm',
            floating: true,
            width: 250,
            height: 370,
            scroll: 'vertical',
            centered: true,
            modal: true,
            hideOnMaskTap: false,
            items: [
            {
                xtype: 'formpanel', // 1. this is the added formpanelitemId: 'searchForm',
                id:  'searchFormId', // this id is importantitems: [
                {  
                    xtype: 'textfield',
                    ...
                }, {
                    xtype: 'textfield',
                    ...

                },
                // all your inputs 
                ]
            },
                // 2. add here the results panel : jobsList
                jobsList
            ],  // the code continues inchangeddockedItems: [{
                              ...

- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form

// here it comes

Ext.util.JSONP.request({
            url: "http://"+serverAdd+":"+ port+"/users/searchresults.json", 
            format: 'json',
            callbackKey: 'callback',
            params : searchCriteria,                
            callback: function(data) {
                console.log('callback');
                // Call your list-filling fonctions here// jobsList.fill(data);Ext.getCmp('searchFormId').hide();
                Ext.getCmp('jobsListId').show();

            },
            failure: function ( result) { 
                console.error('Failed'); 
            }
        }); 

For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.