1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Answered: Rendering component in panel after button click

    Answered: Rendering component in panel after button click


    Hello,

    I am attempting to create a navigation panel with a set of buttons where when each button is pressed, a different component (panel, grid, whatever) will be rendered in a different viewing panel next to the navigation panel.

    I set up a border layout to house my navigation and viewing panel, and set up some buttons, but I am having difficulty figuring out how to render things in the viewing panel, particularly how to get hold of the component object I want to render as it is defined in a different js file than where I am defining my navigation/viewing objects.

    I am trying to grab the component that I am trying to render doing this: var personGeoUnitView = Ext.getCmp('personGeoUnitView'); But it does not seem to be registered.

    1. How can I register it? and
    2. After I get a hold of the object, what is the proper way of rendering it in my viewing comopnent?

    Here is my code thus far:
    --Controller js files
    Code:
    Ext.define('DMT.controller.PanelController', {
        extend: 'Ext.app.Controller',
        stores: ['PersonGeoUnitStore'],
        models: ['PersonGeoUnitModel'],
        views:  ['DMTPanel', 'PersonGeoUnitView'],
    
        init: function() {
            this.control({
                'viewport > panel': {
                    render: this.onPanelRendered
                }
            });
        },
    
        onPanelRendered: function() {
           
        }
    });
    -- Main and Navigation Panel
    Code:
    Ext.define('DMT.view.DMTPanel' ,{
        extend: 'Ext.panel.Panel',
        alias : 'widget.DMTPanel',
        layout: 'border',
        title: 'CMP Data Management Tool',
       
        items: [
        {
            title: 'Navigation',
            layout: 'border',
            id: 'Navigation',
            region: 'west',
            split: true,
            collapsible: true,
            margins: '2 0 5 5',
            width: 175,
            maxWidth: 300,
            items: [{
                xtype: 'toolbar',
                 title: 'Navigation',
                 region: 'center',
                 vertical: true,
                 items: [{
                     id:   'PersonGeoUnitButton',
                    text: '<b>Person Geographical Unit</b>',
                    scale: 'medium',
                    listeners: { 
                        'click': function() {
                            var personGeoUnitView = Ext.getCmp('personGeoUnitView');
                            alert(personGeoUnitView);
                            alert(Ext.ComponentManager.isRegistered('personGeoUnitView'));
                            }    
                    }
                },
                {
                     id:   'OrgStatisticsButton',
                    text: '<b>Organization Statistics</b>',
                    scale: 'medium'
                }]
             }]
        },
        {
            id: 'MainContent',
            region: 'center',
            margins: '5 0 0 0',
            html: '<h1>DMT Content Will Go Here</h1><p>This is where the main content would go</p>'
        }
        ],
        
        initComponent: function() {
            this.callParent(arguments);
        }
    });
    -- One of the views I'd like to render js file
    Code:
    Ext.define('DMT.view.PersonGeoUnitView' ,{
        extend: 'Ext.grid.Panel',
        alias : 'widget.personGeoUnitView',
        id: 'personGeoUnitView',
        title : 'PersonGeoUnitUpdate',
        store: 'PersonGeoUnitStore',
        selType: 'cellmodel',
        
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            ui: 'footer',
            layout: {
                pack: 'left'
            },
            items: [
                { xtype: 'component', flex: 1 },
                { xtype: 'button', text: 'Submit', width: 80, listeners: {
                    'click': function() {
                        var personGeoUnitStore = Ext.data.StoreManager.lookup('PersonGeoUnitStore');
                        var response = personGeoUnitStore.sync();
                    }}}
            ]
        }],
    
        initComponent: function() {
            this.callParent(arguments);
        }
    Thanks,

    infernoz

  2. 1. How can I register it? and
    When a button is clicked, just create an component instance with Ext.create(). To avoid waiting for loading component at the time of creating, you should load it first with 'requires' or 'uses' config.

    2. After I get a hold of the object, what is the proper way of rendering it in my viewing comopnent?
    Add/insert your component instance to a container by using its add() or insert() method.

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default


    One more piece of info, my main viewport is rendering the navigation and viewing panel as such:

    Code:
     launch: function() {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: {
                    xtype: 'DMTPanel'
                }
                
            });
        }

  4. #3
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    1. How can I register it? and
    When a button is clicked, just create an component instance with Ext.create(). To avoid waiting for loading component at the time of creating, you should load it first with 'requires' or 'uses' config.

    2. After I get a hold of the object, what is the proper way of rendering it in my viewing comopnent?
    Add/insert your component instance to a container by using its add() or insert() method.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default


    Thanks. What is the difference between Ext.create and Ext.widget? Both seem to work for this case described above.

  6. #5
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default Convenient shorthand to create a widget by its xtype

    Convenient shorthand to create a widget by its xtype


    • Ext.create() is used to instantiate a class by either full name, alias or alternate name.
    • Ext.widget() is a convenient shorthand to create a widget by its xtype.
    Ex: You can create a button by one of the following ways:
    • var button = Ext.widget('button', {...});
    • var button = Ext.create('widget.button', {...});
    • var button = Ext.create('Ext.button.Button', {...});

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default


    Cheers. Thanks for the response. Essentially Ext.widget and Ext.create will create an instance of a class its just a matter of what way you want to create it (via xtype or name in a path). Is that a valid statement?

  8. #7
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    It's not completely correct. Ext.widget() is only used with widget while Ext.create() can be used with a general class that is not nescessary to be a widget.

Thread Participants: 1

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