Results 1 to 4 of 4

Thread: Access scope when using form items and listeners

  1. #1

    Default Answered: Access scope when using form items and listeners

    I have the below form panel. Currently I'm using the getCmp method to access components of the form from listeners. I have read that getCmp should not be used, but am yet to find a different solution.

    Does anyone know the correct method to access components?



    Code:
    this.searchpanel = new Ext.Panel({
        scroll: 'vertical',
        items: [{
            xtype: 'form',
            id: 'search',
            items: [{
                xtype: 'searchfield',
                id: 'searchField',
                name: 'keyword',
                placeHolder: 'Eg: iphone'
            }, {
                xtype: 'button',
                ui: 'pink',
                text: 'Search',
                handler: this.onSearchAction,
                scope: this
            }, {
                xtype: 'fieldset',
                title: 'Price Range',
                cls: 'sliderSet eightyPercent',
                items: [{
                    xtype: 'sliderfield',
                    id: 'priceFrom',
                    name: 'priceFrom',
                    label: 'From',
                    value: 0,
                    minValue: 0,
                    maxValue: 1999,
                    labelWidth: '20%',
                    listeners: {
                        drag: function(slider, thumb, value) {
                            
                            var priceFromValue = Ext.getCmp('priceFromValue');
                            priceFromValue.update('<div class="gray"></div><div class="tip"><p style="-webkit-transform: translate3d(' + this.getPixelValue(value, this.thumbs[0]) + 'px, 0px, 0px);">$' + value + '</p></div>');              
                        }
                    }
                }, {
                    xtype: 'component',
                    id: 'priceFromValue'
                }, {
                    xtype: 'sliderfield',
                    id: 'priceTo',
                    name: 'priceTo',
                    label: 'To',
                    value: 2000,
                    minValue: 1,
                    maxValue: 2000,
                    labelWidth: '20%',
                    listeners: {
                        drag: function(slider, thumb, value) {
                            
                            var priceToValue = Ext.getCmp('priceToValue');
                            priceToValue.update('<div class="gray"></div><div class="tip"><p style="-webkit-transform: translate3d(' + this.getPixelValue(value, this.thumbs[0]) + 'px, 0px, 0px);">$' + value + '</p></div>');              
                        }
                    }
                }, {
                    xtype: 'component',
                    id: 'priceToValue'
                }],
                listeners: {
                    render: function() {
                        
                        Ext.getCmp('priceFromValue').update('<div class="gray"></div><div class="tip"><p style="margin-left:0">$0</p></div>');
                        Ext.getCmp('priceToValue').update('<div class="gray"></div><div class="tip"><p style="margin-left:100%">Max</p></div>');
                    }
                }
            }, {
                xtype: 'fieldset',
                title: "Discount",
                cls: "sliderSet",
                items: [{
                    xtype: 'sliderfield',
                    id: 'discount',
                    name: 'discount',
                    value: 0,
                    minValue: 0,
                    maxValue: 100,
                    listeners: {
                        render: function() {
                            
                            Ext.getCmp('discountValue').update('<div class="gray"></div><div class="tip"><p style="margin-left:0">0%</p></div>');
                        },
                        drag: function(slider, thumb, value) {
    
    
                            var discountValue = Ext.getCmp('discountValue');
                            discountValue.update('<div class="tip"><p style="-webkit-transform: translate3d(' + this.getPixelValue(value, this.thumbs[0]) + 'px, 0px, 0px);">' + value + '%</p></div>');
                        }
                    }
                }, {
                    xtype: 'component',
                    id: 'discountValue'
                }]
            }, {
                xtype: 'fieldset',
                title: "Sort By",
                cls: "sliderSet",
                items: [{
                    xtype: 'selectfield',
                    name: 'sort',
                    labelWidth: '144px',
                    options: [
                       {text: 'Lowest Price',  value: '1'},
                       {text: 'Highest Price', value: '2'},
                       {text: 'Lowest Discount',  value: '3'},
                       {text: 'Highest Discount', value: '4'},
                       {text: 'Shortest time left',  value: '5'},
                       {text: 'Longest time left',  value: '6'},
                       {text: 'Category A-Z', value: '7'},
                       {text: 'Category Z-A',  value: '8'}                
                    ]
                }]
            }, {
                xtype: 'fieldset',
                title: "Category",
                id: 'category'
            }, {
                xtype: 'button',
                ui: 'pink',
                text: 'Search',
                handler: this.onSearchAction,
                scope: this
            }]
        }],
        listeners: {
            render: function() {
                
                // dynamically create checkboxes based on categories
                var items = [];
                
                var categoriesStore = Ext.StoreMgr.get('LocalCategoriesStore');
                categoriesStore.data.each(function(item) {
                    
                    checkbox = {
                        xtype: 'checkboxfield',
                        hiddenName: 'sort',
                        label: item.data.name,
                        checked: true,
                        labelWidth: '70%'
                    }
                    
                    items.push(checkbox);
    
    
                });
                
                var categoryFieldset = Ext.getCmp('category');
                //console.log(items);
                categoryFieldset.add(items);
                
            }
        }
    });

  2. getCmp is fine but setting static id is not recommended. The better solution is to use ComponentQuery and the convenient methods up, down, query that are on every component.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    getCmp is fine but setting static id is not recommended. The better solution is to use ComponentQuery and the convenient methods up, down, query that are on every component.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3

    Default

    Thanks Mitchell, could you provide an example if possible?

  5. #4

Tags for this Thread

Posting Permissions

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