-
Sencha User
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
-
Best Answer Posted by
arthurakay
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.
-
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.
-
Sencha User
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();
}
});
-
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.
-
Sencha User
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
-
Forum Rules