Sencha Touch - How to pass value in controller to store in view?

只愿长相守 提交于 2019-12-13 04:35:29

问题


I use store filter to search category apps.Value to search apps category is from controller.But I'don't know to pass value from controller to view for use store filter in view.Looks my code:

This my controller:

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

});

This my view:

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:


You could pass the value as a config property, that way ST will auto create its getter and 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',
            }
        ]
    });
}

Then, in the view, the getter getCatId() should be available:

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

Hope it helps-



来源:https://stackoverflow.com/questions/18146372/sencha-touch-how-to-pass-value-in-controller-to-store-in-view

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!