Results 1 to 5 of 5

Thread: unable to make two instance of a custom panel

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6

    Default Answered: unable to make two instance of a custom panel

    I've looked all over google but it hasn't been very helpful >.>
    that or I just am missing something here

    anyway i have a certain panel with an accordion layout that is supposed to show (in long term) x amount of a certain custom panel I made. Instead it seem unable to show it even twice.

    if I write:
    var panel1 = Ext.create('App.view.custom', {
    title: 'panel1'
    })

    var panel2 = Ext.create('App.view.custom', {
    title: 'panel2'
    })


    and then

    Ext.applyIf(this,
    items:[panel1, panel2])


    it will only show the second custom panel

    if i just replace the items with item: [panel1] it will show the first panel with the right title even though I still make the second one...

    so how am I overwriting here?

    if I'm in the wrong place direct me to the right place.
    if there's actually a proper explanation for what I'm doing wrong just link it.
    if there's another question like this with a good answer give me the link.

    I really narrowed it down to that there's nothing else in the classes that can cause what's happening.
    it does work with two basic panels but that's normal

  2. Well for starters you have JS errors and your custom view has a hard-coded ID, which means any instances of that component share the same DOM ID (very bad).

    Removing the ID from your App.view.Custom class seems to fix it for me.

  3. #2
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99

    Default

    If panel1 and panel2 are the child items of some component (a container?), you need to show the configuration of that parent component. I can't give you an answer without seeing that code.

    If I had to guess, you're using the wrong layout and one of these child components is simply hidden.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6

    Default some more code

    alright then
    the container
    Ext.define(App.view.accordionPane',
    {
    extend: 'Ext.panel.Panel',
    layout: 'accordion',
    requires: ['Ext.panel.Panel'],

    initComponent: function()
    {
    var me = this;

    var drawer = Ext.create('App.view.Custom',
    {
    title: 'the first one'
    });

    var drawer2 = Ext.create('App.view.Custom',
    {
    title: 'something else'
    });

    Ext.applyIf(me,
    {
    items: [drawer, drawer2]
    })

    me.callParent();
    }
    });

    and the other one

    Ext.define('App.view.Custom',
    {
    id:'drawerPanel',
    extend: 'Ext.panel.Panel',
    requires: ['Ext.panel.Panel'],

    initComponent: function()
    {
    var me = this;

    //insert panel definitions here

    me.callParent();

    }


    });

  5. #4
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99

    Default

    Well for starters you have JS errors and your custom view has a hard-coded ID, which means any instances of that component share the same DOM ID (very bad).

    Removing the ID from your App.view.Custom class seems to fix it for me.

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6

    Default Sounds logical

    I'll try that in the morning when I can reach the code again
    if it works I'll mark this as answered
    else I post again xP

    thx

    (I'm pretty sure it'll work)

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
  •