Sencha Touch - 显示搜索表单的结果

时间：2011-04-07 14:48:48

标签： javascript iphone mobile sencha-touch extjs

如果有任何帮助，我将不胜感激。我刚刚开始构建我的第一个sencha应用程序，并对目前的结果感到满意，但我现在仍然坚持一件事。我已经构建了一个搜索表单，希望能够在同一页面上显示结果，但这就是我被困住的地方。表单工作并使用GET发送结果，但它不会将其发送到正确的位置。我想在同一页面上显示它（我已经构建了一个名为search.php的php文件来处理结果），但它会使用url中的变量重新加载整个应用程序。

我已经从应用程序中测试了所有代码并且它完美运行所以我知道问题不在于代码，但更多的是由于我对Sencha缺乏了解，所以非常感谢任何帮助。< / p>

代码：

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();
                }
            }]
        }]
    }]
});

然后我尝试使用它在同一页面上显示结果，但正如我所说，这是行不通的。它根本不会调用search.php页面。

我已确保所有文件（除了js文件夹中的index.js文件）与index.html文件位于同一目录中。

我还尝试使用以下方法单独加载应用程序中的文件：

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'
        }
    }
});

这完全有效，所以我知道所有的PHP工作都可以和Sencha Touch一起工作，但我只是不确定如何让它只在有人点击'搜索'时才能工作

我很感激任何帮助，因为我花了几天时间在网上搜索这个问题，但似乎没有任何工作：（

我不知道这是否有帮助，但主要的javascript文件是：

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
            ]
        }); 
    }
})

1 个答案:

答案 0 :(得分：1)

只需使用filter（）函数更新您的商店。首先，您必须将正确的filterParam添加到商店配置中。在此之后，您可以在搜索按钮处理程序中调用filter（）函数。 E.g。

searchForm.filter('keywordParam', searchfield.getValue());

在此之后，您的商店将在不刷新页面的情况下进行更新。然后，您可以使用DataView显示搜索结果。

相关问题
最新问题