Sencha Object 접근하기

ComponentQuery 사용

Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    getTreePanelInfo: function () {
        // Use ComponentQuery to find the TreePanel
        var treePanel = Ext.ComponentQuery.query('treepanel')[0]; // Adjust the selector if needed
        if (treePanel) {
            console.log('TreePanel Title:', treePanel.getTitle());
            console.log('TreePanel Root Node:', treePanel.getRootNode());
        } else {
            console.log('TreePanel not found!');
        }
    }
});

reference 사용

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'main',
    controller: 'main',

    items: [
        {
            xtype: 'treepanel',
            reference: 'myTreePanel', // Reference for the TreePanel
            title: 'Sample TreePanel',
            width: 400,
            height: 300,
            rootVisible: false,
            store: {
                root: {
                    expanded: true,
                    children: [
                        { text: 'Node 1', leaf: true },
                        { text: 'Node 2', leaf: true }
                    ]
                }
            }
        }
    ]
});

Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    getTreePanelInfo: function () {
        var treePanel = this.lookupReference('myTreePanel'); // Get TreePanel by reference
        if (treePanel) {
            console.log('TreePanel Title:', treePanel.getTitle());
            console.log('TreePanel Root Node:', treePanel.getRootNode());
        } else {
            console.log('TreePanel not found!');
        }
    }
});

id 사용

// Define TreePanel with an id
Ext.create('Ext.tree.Panel', {
    id: 'myTreePanel', // Assign an id
    title: 'Sample TreePanel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    rootVisible: false,
    store: {
        root: {
            expanded: true,
            children: [
                { text: 'Node 1', leaf: true },
                { text: 'Node 2', leaf: true }
            ]
        }
    }
});

// In Controller or elsewhere
var treePanel = Ext.getCmp('myTreePanel');
if (treePanel) {
    console.log('TreePanel Title:', treePanel.getTitle());
    console.log('TreePanel Root Node:', treePanel.getRootNode());
}

itemId 사용

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'panel',
            itemId: 'innerPanel',
            title: 'Inner Panel'
        }
    ]
});

// Reference using the container
var container = Ext.ComponentQuery.query('container')[0];
var innerPanel = container.down('#innerPanel');
console.log(innerPanel.title); // Output: Inner Panel

xtype, selector, custom proerties 사용

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        { xtype: 'panel', title: 'Panel 1', itemId: 'panel1' },
        { xtype: 'panel', title: 'Panel 2', itemId: 'panel2' }
    ]
});

// Query all panels
var panels = Ext.ComponentQuery.query('panel');
console.log(panels.length); // Output: 2

// Query a specific panel
var panel1 = Ext.ComponentQuery.query('#panel1')[0];
console.log(panel1.title); // Output: Panel 1

down, up, child, parent 사용

var container = Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'panel',
            itemId: 'innerPanel',
            title: 'Inner Panel'
        }
    ]
});

// Access child component
var innerPanel = container.down('#innerPanel');
console.log(innerPanel.title); // Output: Inner Panel

// Access parent component
var parentContainer = innerPanel.up('container');
console.log(parentContainer === container); // Output: true