Sencha Touch - 如何在控制器中传递值以存储在视图中?

时间:2013-08-09 12:12:54

标签: sencha-touch-2

我使用商店过滤器搜索类别apps.Value搜索应用类别来自controller.But我不知道从控制器传递值到视图中使用商店过滤器在视图中。查看我的代码:

这是我的控制器

Ext.define('Catalog.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            homepanel: 'homepanel',
            but: 'homepanel #category',
            categoryButton: 'button[action=Categories]', 
            list:'list',
            homepanellist: 'homepanel #Applist',
            navigationlist: 'navigation #Catlist',
            navigation: 'navigation'

        },
        control: {
            homepanellist:{
                itemtap: 'showApp'
            },
            categoryButton:{
                tap: 'showCat'
            },
            homepanel: {
                back: 'backButtonHandler'
            },
            navigationlist:{
                itemtap: 'showCatQuery'
            },
            navigation:{
                back: 'backButtonNav'
            }
        }
    },

    //called when the Application is launched, remove if not needed
    showApp: function(list,index,element,record) {
        Ext.getCmp('category').hide();
        // this.getBut().setHidden(true);
        var Catname = Ext.get('catname').dom.innerHTML;
        var butDown = '';
        var gal = record.get('gallery');
        var items2 = [];
        if(gal.length > 0){
            for(var i = 0; i < gal.length;i++){
                items2.push({
                    html:'<center><img style="margin-top:10px;" src="http://127.0.0.1:3000/system/gallery_apps/imgs/000/000/'+gal[i].id+'/original/'+gal[i].img_file_name+'" width="200" height="300"></center>'
                }) 
            } 
        }
        // Check OS Mobile
        if(Ext.os.name == "iOS"){
            butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_ios')+"'><img src='touch/resources/images/d_ios.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
        }else{
            butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_android')+"'><img src='touch/resources/images/d_and.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
        }
        // Check OS Mobile
        this.getHomepanel().push({ 

            xtype: 'panel',
            title: 'info',
            scrollable: true,
            styleHtmlContent: true,
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'panel',
                    style: 'margin-left: -1.2em;margin-right: -1.2em;margin-top: -1.2em;',
                    height:100,
                    html: '<div style="width: 100%;height: 100px;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
                        '<div style="float:left;width:85px;">'+
                            '<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/'+record.get('id')+'/original/'+record.get('appicon_file_name')+'" width="75" heigh="75"></img>'+
                        '</div>'+
                        '<div style="word-wrap: break-word;"><b><p style="font-size:15px;margin:0;">'+record.get('name')+'</p></b><p>'+Catname+'</p></div>'+
                        butDown+
                    '</div>'+
                    '<div style="clear:both;"></div>'

                },
                {
                    // xtype:'datascreen',
                    // data:record.data
                    xtype:'carousel',
                    direction: 'horizontal',
                    height:325,
                    style: 'margin-left: -1.2em;margin-right: -1.2em;background-color:#C0C0C0;box-shadow:inset 3px 3px 49px #fafafa;border-bottom:2px ridge #C5C7BC;',
                    listeners:
                    {
                        'afterrender': function(carousel) {
                            carousel.pageTurner = new Ext.util.DelayedTask(function() {
                                if (this.getActiveIndex() == this.items.length - 1) {
                                    this.setActiveItem(0, 'slide');
                                }
                                else {
                                    this.next();
                                }
                                this.pageTurner.delay(6000);
                            }, carousel);
                            carousel.pageTurner.delay(6000);
                        }
                    },
                    items: items2 
                },
                {
                    xtype: 'panel',
                    style: 'margin-left: -1.2em;margin-right: -1.2em;',
                    html: 
                    '<div style="width: 100%;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
                        '<h1 style="font-size:16px;font-weight:bold;color:black;">Description</h1>'+
                        '<div id="deS">'+
                            record.get('description')+
                        '</div>'+
                    '</div>'
                }
            ]
        });


    },
    backButtonHandler: function(button){
        Ext.getCmp('category').show();
    },
    backButtonNav: function(button){
        Ext.getCmp('category').hide();
    },
    showCat: function(btn){
        Ext.getCmp('category').hide();
        this.getHomepanel().push(
            {
                xtype: 'panel',
                title: 'Categories',
                scrollable: true,
                styleHtmlContent: true,
                layout: {
                    type: 'fit'
                }, 
                items: [
                    {
                        xtype: 'navigation'
                    }
                ]
            }
        );

        // this.but().setHidden(true);

    },
    showCatQuery: function(list,index,element,record){
        // var sto = Ext.getStore('myStore');
        // sto.clearFilter();
        // sto.filter('id', record.get('id'));
        // console.log(record.get('id'));
        var catid = record.get('id'); << This Value for send to view for store filter
        this.getNavigation().push({
            xtype: 'panel',
            title: 'A',
            scrollable: true,
            styleHtmlContent: true,
            layout: {
                type: 'fit'
            }, 
            items: [
                {
                    xtype: 'showSearchCategory',
                }
            ]
        });
    }

});

我的观点:

Ext.define('Catalog.view.showSearchCategory', {
    extend: 'Ext.navigation.View',
    xtype: 'showSearchCategory',
    requires: ['Ext.data.Store'],
    config: {
        navigationBar: false,
        items: [
            {
                title: "All Apps",
                xtype: 'list',
                // id:'Applist',
                itemTpl: new Ext.XTemplate(
                    '<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
                    '<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
                    '<span style="font-size:16px;">{name}</span><br>',
                    // '<tpl for="categories">',
                    '<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
                    '</div>'
                    // '</tpl>'

                ),
                store: {
                    autoLoad: true,
                    storeId: 'allapp',
                    fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
                    sorters: [{
                        property:'created_at',
                        direction:'DESC'
                    }],
                    proxy: {
                        type: 'jsonp',
                        url: 'http://127.0.0.1:3000/appinfos.json',
                        reader:{
                            type: 'json',
                            rootProperty:'appinfos'
                        }   
                    }
                }
            }
        ]       
    },
    initialize: function() {
        this.callParent(arguments);
        var sto = Ext.getStore('allapp');
        sto.clearFilter();
        sto.filter('categoryid', '2'); << **cateforyid to field and 2 is value for filter**
    }


});

1 个答案:

答案 0 :(得分:0)

您可以将值作为配置属性传递,这样ST将自动创建其getter和setter:

showCatQuery: function(list,index,element,record){
    var catid = record.get('id'); //This Value for send to view for store filter
    this.getNavigation().push({
        xtype: 'panel',
        title: 'A',
        scrollable: true,
        styleHtmlContent: true,

        catid: catid,

        layout: {
            type: 'fit'
        }, 
        items: [
            {
                xtype: 'showSearchCategory',
            }
        ]
    });
}

然后,在视图中,getter getCatId()应该可用:

initialize: function() {
    this.callParent(arguments);
    var sto = Ext.getStore('allapp');
    sto.clearFilter();
    sto.filter('categoryid', this.getCatid() );
}

希望有所帮助 -