Quote from: stetus at Feb 28, 2011, 06:08 PM
Sorry, don’t want to push, but I don’t think the answer is that difficult, I just don’t get it:
Is there any show() method which returns the html/js stuff?
Thank you guys.
An xtype is like a "template" as I like to refer to them. Objects which can contain other objects, items, configuration etc. There’s no show() method, but you need to refer to the xtype in the JS which you use to build up your CMP.
Here’s a part of the JS I use for the VersionX home tabbed interface. See how I used xtype in that piece twice.
VersionX.panel.Hometabs = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel' // Basic class to use -> styles the whole thing.
,items: [{ // Multidimensional array of items in the panel.Hometabs config
html: '<h2>'+_('versionx.versionx')+'</h2>'
,border: false
,cls: 'modx-page-header' // Header class
},{
xtype: 'modx-tabs' // Use the MODx tabs "template"
,bodyStyle: 'padding: 10px'
,defaults: { border: false ,autoHeight: true }
,border: true
,stateful: true
,stateId: 'versionx-home-tabpanel'
,items: [{ // Items to display (which are tabs in this case)
title: _('versionx.overviewTitle')
,defaults: { autoHeight: true }
,items: [{ // First tab contents
html: '<p>'+_('versionx.overviewDescription')+'</p>'
,border: false
,bodyStyle: 'padding: 10px'
},{ // Second item in the first tab
html: '<h3>'+_('versionx.devTitle')+'</h3>'+
'<p>'+_('versionx.devDescription')+'</p>'
,border: false
,bodyStyle: 'padding: 10px'
}]
},{ // Second tab
title: _('versionx.resourcesTitle')
,defaults: { autoHeight: true }
,items: [{
html: '<p>'+_('versionx.resourcesDescription')+'</p>'
,border: false
,bodyStyle: 'padding: 10px'
},{
xtype: 'versionx-grid-resources' // This xtype refers to something I declare later
,preventRender: true
}]
}
From
https://github.com/Mark-H/VersionX/blob/master/assets/components/versionx/js/hometabs.panel.js
☆ A M B ☆