Extjs: how Element's up/down functions work?

Tags: javascript,jquery,css,extjs

Problem :

I have some extjs code to support, but I have a problem with understanding those up/down functions in extjs Elements. Current question is selector parameter. Documentation says that it should be CSS selector, but I don't get how to set it up. E.g. I have some view like that:

Ext.define('ETaxi.settings.view.InfoPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.infopanel',
    title: i18n.settings.info.title,

    defaultType: 'displayfield',

    items: [{
        fieldLabel: i18n.settings.info.label,
        name: 'title'

How can I set up it's CSS selector in order to get this element from hierarchy via up/down functions?

Any additional information about those functions workflow is invited. Thank you.

Solution :

If a panel has a button inside and you have a reference to that button you can do:

var myDesiredPanel=someButtonReference.up('infopanel'); //we are using the xtype to find it. This time we use up because the button is inside the panel.

If on the other hand the panel is inside let say a viewport you could do:

var myDesiredPanel=referenceToMyVieport.down('infopanel');

About the selector, it means that you can do:

 myDesiredPanel = referenceToMyVieport.down('infopanel[title=MyInfoPanel]');

you would fetch only an infopanel who's title is MyInfoPanel, you can use any config of the object to do this discrimination

Here is an example of the code where we fetch an specific button inside a panel through down https://fiddle.sencha.com/#fiddle/1p6 you can modify it in this fiddle and look how it works.

    CSS Howto..

    How to pass parameters to css classes

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How do you name these tags in CSS? [closed]

    How to insert a div in between flexbox rows and keep everything responsive?

    How can I get a left-navigation column to fill the entire left side of the middle of a webpage using CSS?

    How to output CSS files to single directory from several input directories?

    simple css issue - how to change anchor inside li if li:hover

    slide show with bootstrap

    CSS - How to make a text to be shown under the center of an element, no matter how long the text is

    How to add font to web application .css file

    Last inherited display property is inline but computed is block. How is this even possible?

    how to Styling a “choose file” button using css Only

    How to make the long text to fit inside a small div?

    How to remove curved line in HTML/CSS

    How to separate different properties of a css gradient?

    W3.CSS how to get a standard header-[left-right]footer layout?

    How to remove blue underline on text in Chrome - CSS?

    How do I remove white space due to position relative of CSS?

    selectCheckboxMenu: items are shown with bold font

    How to make CSS animation happen the moment the website loads

    How do I align an item to the right inside a flex container?

    css how to align absolute positioned child element to the right of fluid width parent

    how to show like chat box for the div/p tag top left/right corners

    How to create vertical list of items in CSS?

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to decrease spacing between bootstrap glyphicons

    How do I position a div below an image with changing height?

    how to select an anchor tag with a specific id inside a ul using css

    By CSS, how to make page height not change when an element is moved down

    how to Put a img and text middle of a div