Access scope when using form items and listeners

[rossmurphy]

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?

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

[mitchellsimoens]

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.

[rossmurphy]

Thanks Mitchell, could you provide an example if possible?

[mitchellsimoens]

http://docs.sencha.com/touch/1-1/#!/...r-method-child
http://docs.sencha.com/touch/1-1/#!/...er-method-down
http://docs.sencha.com/touch/1-1/#!/...r-method-query
http://docs.sencha.com/touch/1-1/#!/...iner-method-up