1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    21
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default Answered: How to avoid using namespace in following example

    Answered: How to avoid using namespace in following example


    Hello Community,

    I'm new to sencha and trying to find as flexible sollutions as possible. Apparently using namespace with fixed name isn't one of them :-)
    It's difficult to learn from documentation (tho it's best documentation I've ever seen!!) therefore I learn on examples but couldn't find suitable this time.

    What's going on.
    Controller creates row for fieldset with label "Icon" and button which opens gallery (floating panel) where you can select image. After selecting image from gallery the same button's background should change to the same image which you selected in the gallery. AJAX returns only object string with path to images.

    As you see I used Webclip namespace twice to pass parameters between Components/Files, but I'm not quite sure if it's best way to do so... I tried to use scope but I perhaps misunderstood what it's really for.

    Controller:
    Code:
    Ext.define('IconInput', {
        extend: 'Ext.field.Field',
        alias: 'widget.iconinput',
    
        config: {
            label: 'Icon',
            cls: 'icon-input',
    
            component:
            {
                xtype: 'iconselector'
            }
        }
    });
    
    Ext.define('IconSelector', {
        extend: 'Ext.Button',
        alias: 'widget.iconselector',
    
        config: {
            width: 57,
            height: 57,
            iconCls: 'add1',
            iconMask: true,
    
            handler: function() {
                Ext.getCmp('images-gallery').show();
                Webclip.current = this;
                //console.log(this);
            }
        }
    });
    View:
    Code:
    Ext.namespace('Webclip');
    
    Ext.Ajax.request({
                url: 'getimages.php',
                success: function(response) {
                    Webclip.list = Ext.JSON.decode(response.responseText);
    
                    Ext.Viewport.add({
                        xtype: 'panel',
                        id: 'images-gallery',
                        modal: true,
                        hideOnMaskTap: true,
                        centered: true,
                        width: 280,
                        height: 340,
                        hidden: true,
                        scrollable: 'vertical',
                        
                        items: [
                            {
                                xtype: 'titlebar',
                                docked: 'top',
                                title: 'Select icon',
                                style: 'height: 2.5em; font-size: 0.8em;'
                            }
                        ]
                    });
    
    
                    for(var x in Webclip.list)
                    {
                        //console.log(Webclip.list[x]);
                        var imageButton = Ext.create('Ext.Button', {
                            text: '',
                            width: 57,
                            height: 57,
                            icon: Webclip.list[x],
                            cls: 'gallery-button',
    
                            handler: function () {
                                Webclip.current
                                    .setStyle('background: url("' + this.getIcon() + '");')
                                    .setIcon('')
                                    .addCls('x-button-icon-selected');
    
                                Ext.getCmp('images-gallery').hide();
                            }
                        });
    
                        Ext.getCmp('images-gallery').add(imageButton);
                    }
                }
            });
    Thanks in advance for your help!

  2. Code:
    Ext.define('MyApp.view.Gallery', {
        extend:'Ext.Panel',
        xtype:'gallery',
        config: {
            //xtype: 'panel',
            //id: 'images-gallery',
            modal: true,
            hideOnMaskTap: true,
            centered: true,
            width: 280,
            height: 340,
            hidden: true,
            scrollable: 'vertical',
            
            items: [{
                xtype: 'titlebar',
                docked: 'top',
                title: 'Select icon',
                style: 'height: 2.5em; font-size: 0.8em;'
            }],
            iconButton: null,
        },
        doSelectIcon: function(btn){
            this.getIconButton().setStyle('background: url("' + btn.getIcon() + '");')
                                 .setIcon('')
                                 .addCls('x-button-icon-selected');
        },
        initialize:function(){
            var me=this;
            this.callParent(arguments);
            
            Ext.Ajax.request({
                url: 'getimages.php',
                success: function(response) {
                    var result = Ext.JSON.decode(response.responseText);
    
    
                    for(var x in result)
                    {
                        //console.log(result[x]);
                        var imageButton = Ext.create('Ext.Button', {
                            text: '',
                            width: 57,
                            height: 57,
                            icon: Webclip.list[x],
                            cls: 'gallery-button',
                            handler: me.doSelectIcon,
                            scope:me
                        });
    
    
                        me.add(imageButton);
                    }
                }
            });
        }
    });
    Code:
    Ext.define('IconSelector', {
        extend: 'Ext.Button',
        alias: 'widget.iconselector',
        config: {
            width: 57,
            height: 57,
            iconCls: 'add1',
            iconMask: true,
    
    
            handler: function() {
                var gallery = Ext.getCmp('images-gallery');
                if(!gallery){
                     gallery = Ext.Viewport.add({
                         xtype:'gallery',
                         id:'images-gallery'
                     });
                }
                gallery.setIconButton(this);
                gallery.show();
            }
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,668
    Answers
    3354
    Vote Rating
    746
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm not quite sure what you are doing and what the issue is.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      1  

    Default


    Code:
    Ext.define('MyApp.view.Gallery', {
        extend:'Ext.Panel',
        xtype:'gallery',
        config: {
            //xtype: 'panel',
            //id: 'images-gallery',
            modal: true,
            hideOnMaskTap: true,
            centered: true,
            width: 280,
            height: 340,
            hidden: true,
            scrollable: 'vertical',
            
            items: [{
                xtype: 'titlebar',
                docked: 'top',
                title: 'Select icon',
                style: 'height: 2.5em; font-size: 0.8em;'
            }],
            iconButton: null,
        },
        doSelectIcon: function(btn){
            this.getIconButton().setStyle('background: url("' + btn.getIcon() + '");')
                                 .setIcon('')
                                 .addCls('x-button-icon-selected');
        },
        initialize:function(){
            var me=this;
            this.callParent(arguments);
            
            Ext.Ajax.request({
                url: 'getimages.php',
                success: function(response) {
                    var result = Ext.JSON.decode(response.responseText);
    
    
                    for(var x in result)
                    {
                        //console.log(result[x]);
                        var imageButton = Ext.create('Ext.Button', {
                            text: '',
                            width: 57,
                            height: 57,
                            icon: Webclip.list[x],
                            cls: 'gallery-button',
                            handler: me.doSelectIcon,
                            scope:me
                        });
    
    
                        me.add(imageButton);
                    }
                }
            });
        }
    });
    Code:
    Ext.define('IconSelector', {
        extend: 'Ext.Button',
        alias: 'widget.iconselector',
        config: {
            width: 57,
            height: 57,
            iconCls: 'add1',
            iconMask: true,
    
    
            handler: function() {
                var gallery = Ext.getCmp('images-gallery');
                if(!gallery){
                     gallery = Ext.Viewport.add({
                         xtype:'gallery',
                         id:'images-gallery'
                     });
                }
                gallery.setIconButton(this);
                gallery.show();
            }
        }
    });
    I write English by translator.

  5. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    21
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default


    wow thanks a lot haduki,

    You've perfectly shown in your solution usage of get____ and callParerent() which surely will help me in further development.

    Thanks again!

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar