Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sencha Touch - showing results from search form

    I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url.

    I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help.
    Code:
    searchForms = new Ext.TabPanel({
        fullscreen: true,
        title: 'Search',
        displayField: 'text',
        store: searchForm,
        iconCls: 'search',  
        items: [{
            id: 'searchSubmit',
            xtype: 'form',
            standardSubmit : true,
            scroll: 'vertical',
            items: [{
                xtype: 'fieldset',
                title: 'Keywords',
                defaults: {
                    // labelAlign: 'right'
                    labelWidth: '35%'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'keywords',
                 id: 'keywords',
                    placeHolder: 'EG: Music, TV',
                    autoCapitalize : true,
                    required: true,
                    useClearIcon: true
                }]
            }, {
                xtype: 'fieldset',
                title: 'Advanced Search',
                items: [{
                        xtype: 'selectfield',
                    name: 'genre',
                 id: 'genre',
                    label: 'Genre',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Country',
    value: '1'
    text: 'Sci-Fi',
    value: '2'
    text: 'Western',
    value: '3'
                    }]
                }, {
                    xtype: 'selectfield',
                    name: 'media',
                 id: 'media',
                    label: 'Media',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Music',
    value: '1'
    text: 'TV',
    value: '2'
    text: 'Movie',
    value: '3'
                    }]
                }]
            }, {
                layout: 'vbox',
                defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
                items: [{
                    text: 'Search',
                     ui: 'confirm',
                    scope: this,
                    hasDisabled: false,
                    handler: function(){
                        searchForms.submit({
                        url: 'search.php'
                    });
                    }
                }, {
                    text: 'Reset',
                    ui: 'decline',
                    handler: function(){
                        searchForms.reset();
                    }
                }]
            }]
        }]
    });
    I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all.

    I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file.

    I've also tried to load the file in the app seperately by using:

    Code:
     
    Ext.regModel('mobile', {
        fields: [
           {name: 'text',        type: 'string'}
        ]
    });
    
    var searchForm = new Ext.data.TreeStore({
        model: 'mobile',
        proxy: {
            type: 'ajax',
            url: 'search.php?keywords=test',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search'

    I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working

    I don't know if this is of help, but the main javascript file is:

    Code:
    var tabPanel;
    
    var homePanel = new Ext.Panel({
        title: 'Home',
        iconCls: 'home',
        fullscreen: true,
        scroll:{direction:'vertical',threshold:7},
        items: [{
            html: '<center><p>Home</p></center>'    
        }]
    });
    
    var servicePanel = new Ext.Panel({
        title: 'Services',
        iconCls: 'team',
        fullscreen: true,
        items: [{
            html: '<center>Please choose a service</center>'    
        }]
    });
    
    var searchPanel = new Ext.Panel({
        title: 'Search',
        iconCls: 'search',
        fullscreen: true,
        items: [{
            html: '<center>Search</center>' 
        }]
    });
    
    var feedtabpanel = new Ext.Carousel({
        title: 'More',
        iconCls: 'more',
        fullscreen: true,
        sortable  : true,
        xtype:'panel',
        scroll:{direction:'vertical',threshold:7},
        items: [
            {
                title: 'Contact',
                html : '<center><h1>Contact Us</h1></center>',
            },
            {
                title: 'Feedback',
                html : '<center><h1>Let us know what you think<h1></center>',
            },
            {
                title: 'Tell a friend',
                html : '<center><h1>Tell your friends how much you love this app</h1></center>',
            }
        ]
    });
    
    
    searchForms = new Ext.TabPanel({
            fullscreen: true,
            title: 'Search',
            displayField: 'text',
            store: searchForm,
            iconCls: 'search',  
            items: [{
                id: 'searchSubmit',
                xtype: 'form',
                standardSubmit : true,
                scroll: 'vertical',
                items: [{
                    xtype: 'fieldset',
                    title: 'Keywords',
                    defaults: {
                        // labelAlign: 'right'
                        labelWidth: '35%'
                    },
                    items: [{
                        xtype: 'textfield',
                        name: 'keywords',
                     id: 'keywords',
                        placeHolder: 'EG: Music, TV',
                        autoCapitalize : true,
                        required: true,
                        useClearIcon: true
                    }]
                }, {
                    xtype: 'fieldset',
                    title: 'Advanced Search',
                    items: [{
                            xtype: 'selectfield',
                        name: 'genre',
                     id: 'genre',
                        label: 'Genre',
                        options: [{
        text: 'All',
        value: ' '
        text: 'Country',
        value: '1'
        text: 'Sci-Fi',
        value: '2'
        text: 'Western',
        value: '3'
                        }]
                    }, {
                        xtype: 'selectfield',
                        name: 'media',
                     id: 'media',
                        label: 'Media',
                        options: [{
        text: 'All',
        value: ' '
        text: 'Music',
        value: '1'
        text: 'TV',
        value: '2'
        text: 'Movie',
        value: '3'
                        }]
                    }]
                }, {
                    layout: 'vbox',
                    defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
                    items: [{
                        text: 'Search',
                         ui: 'confirm',
                        scope: this,
                        hasDisabled: false,
                        handler: function(){
                            searchForms.submit({
                            url: 'search.php'
                        });
                        }
                    }, {
                        text: 'Reset',
                        ui: 'decline',
                        handler: function(){
                            searchForms.reset();
                        }
                    }]
                }]
            }]
        });
    
    Ext.regModel('mobile', {
        fields: [
            {name: 'text',        type: 'string'}
        ]
    });
    
    var searchForm = new Ext.data.TreeStore({
        model: 'mobile',
        proxy: {
            type: 'ajax',
            url: 'search.php',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    
    var store = new Ext.data.TreeStore({
        model: 'mobile',
        proxy: {
            type: 'ajax',
            url: 'areas.php',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    
    var nestedList = new Ext.NestedList({
        fullscreen: true,
        title: 'Location',
        displayField: 'text',
        store: store,
        iconCls: 'locate',  
    });
    
    nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
        var store      = subList.getStore(),
            record     = store.getAt(subIdx),
            recordNode = record.node,
            title      = nestedList.renderTitleText(recordNode),
            card, preventHide, anim;
    
        if (record) {
            card        = record.get('card');
            anim        = record.get('animation');
            preventHide = record.get('preventHide');
        }
    
        if (card) {
            tabPanel.setCard(card, anim || 'slide');
            tabPanel.currentCard = card;
        }
    });
    
    var services = new Ext.data.TreeStore({
        model: 'mobile',
        proxy: {
            type: 'ajax',
            url: 'subcats.php',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    
    var servicesList = new Ext.NestedList({
        fullscreen: true,
        title: 'Services',
        displayField: 'text',
        store: services,
        iconCls: 'team',    
    });
    
    servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
        var store      = subList.getStore(),
            record     = store.getAt(subIdx),
            recordNode = record.node,
            title      = servicesList.renderTitleText(recordNode),
            card, preventHide, anim;
    
        if (record) {
            card        = record.get('card');
            anim        = record.get('animation');
            preventHide = record.get('preventHide');
        }
    
        if (card) {
            tabPanel.setCard(card, anim || 'slide');
            tabPanel.currentCard = card;
        }
    });
    
    Ext.setup({
        icon: 'icon.png',
        glossOnIcon: false,
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
    
        onReady: function() {
    
            tabPanel = new Ext.TabPanel({
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                fullscreen: true,
                ui: 'dark',
                animation: {
                    type: 'cardslide',
                    cover: true
                },
                items: [
                    homePanel,
                    nestedList,
                    servicesList,
                    searchForms,
                    feedtabpanel
                ]
            }); 
        }
    })

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,316
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    This is the JavaScript forum. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names. Rather like Austria and Australia! Ask a mod to move the thread over.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    This is the JavaScript forum. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names. Rather like Austria and Australia! Ask a mod to move the thread over.
    Sorry I didn't mean to imply that Sencha uses Java, it does use JavaScript. I'm pretty new to JavaScript and am completely stuck as to how to fix this


  •  

    Posting Permissions

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