accordion without markup

[end-user]

I cannot get an auto-created (no markup) accordion to display properly. Firebug shows the object is created, but I can't get it to be visible/active. ~o) Can you give me a quick example? Is there any API documentation on these [Accordion/InfoPanel] extensions?



<div id="accordion" style="width:400px;"></div>




<script>
// Ext Accordion Application

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
var panel
Ext.onReady(function() {
// create accordion
panel = new Ext.ux.Accordion('acc-ct', {
fitHeight: true
})

panel.add(new Ext.ux.InfoPanel({
title: "6. Auto-created panel, no markup"
, id:"ipanel-6"
//, desktop: 'panels-tab'
, draggable: true
, useShadow: true
, autoCreate: {
tag:'div'
, children:[{
tag:'div'
, cls:'text-content'
, html: "Message goes here"
}]
}
}))

});

// end of file
</script>

[jsakalos]

I cannot get an auto-created (no markup) accordion to display properly. Firebug shows the object is created, but I can't get it to be visible/active. ~o) Can you give me a quick example? Is there any API documentation on these [Accordion/InfoPanel] extensions?


Quite detailed documentation is in the comments in the source code. Plus Example site.






<div id="accordion" style="width:400px;"></div>


<script>
// Ext Accordion Application

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
var panel
Ext.onReady(function() {
// create accordion
panel = new Ext.ux.Accordion('acc-ct', {
fitHeight: true
})

panel.add(new Ext.ux.InfoPanel({
title: "6. Auto-created panel, no markup"
, id:"ipanel-6"
//, desktop: 'panels-tab'
, draggable: true
, useShadow: true
, autoCreate: {
tag:'div'
, children:[{
tag:'div'
, cls:'text-content'
, html: "Message goes here"
}]
}
}))

});

// end of file
</script>
You don't use "accordion" div anywhere. Where's container with id="acc-ct"? Further I wouldn't recommend to name accordion "panel" as it calls for confusions and troubles.

[jexxi]

Maybe this could help.



<div id="div-center" class="x-layout-inactive-content">
<div id="div-center-body"></div>
</div>



var acc2 = new Ext.ux.Accordion('div-center', { //==> element to place accordion
body: 'div-center-body', //==> accordion body
fitToFrame: true,
draggable: false,
fitContainer: true
});
var cpanel1 = new Ext.ux.InfoPanel({
title: 'Center Panel 1',
autoCreate: { //==> this is mandatory for no markup InfoPanel
tag: 'div',
children: {
tag: 'div',
html:'bla...bla...bla... bla...bla...bla bla...bla...bla bla...bla...bla'
}
}
});
acc2.add(cpanel1);