View Full Version : Creating components without renderto

15 Jun 2012, 6:27 AM
Please forgive me - I'm still trying to get my feet under me with ExtJS 4.1, and so I probably missed some vital piece of info in the docs.

I'm trying to extend the panel component, then create it and render it to a div element. I'm thinking I'm mixed up on the order of events during component creation, because I get an error, the root cause of which is that the extended panel class does not have a renderto value. I would like to be able to create the panel, then render it to the div element later since the data for the panel element comes from an async call which I have to wait for. To sum up:

The page renders, and I create my panel, the content of which will be some header text and an ExtJS slider. The panel will not be rendered until a link is clicked on, which will bring up a modal with the panel in it.
The user clicks on the link, which then renders the modal. At this point, I need to grab information from the rendered page to set up the slider data, create the slider, add it to the panel, and render the panel to a div element in the modal.
The modal comes up when the link is clicked, and it will have one or two panels (each with a slider) depending on the page data.
The current error I'm getting is that the "me.items" array is null. Any pointing in the right direction would be greatly appreciated. My current code (feel free to tell me all the things I did wrong) is as follows:

Ext.define('Long.winded.tree.hierarchy.ChartLimitFilterControl', {
extend: 'Ext.panel.Panel',
alternateClassName: ['My.ChartLimitFilterControl'],
statics: {
border: 0,
layout: 'fit',
renderTo: 'lfSlider1', // the ID of a div element in the modal window
items: []
config: {
metricInfo: null,
scaleFmtrName: null,
formatFn: null,
axisValues: null,
slider: null
* @param {Object} metricInfo
* @param {Array} axisValues
constructor: function(id,metricInfo,axisValues) {
Ext.apply(this, PR.Modal.GLOBAL_CONFIG);
this.id = id;
this.metricInfo = metricInfo;
this.scaleFmtrName = metricInfo.scaleFormatter;
this.formatFn = window.Basechart.scaleFormatters[metricInfo.scaleFormatter];
this.axisValues = axisValues.sort(function(a, b) {
return b - a;

initComponent: function() {
beforeDestroy: function() {
window.logHound.logDebug('Destroying the limit filter slider!',['ChartLimitFilterControl']);
initSlider:function() {
this.add({ // error occurs on this line, where the call to "add()" says there's no items array.
xtype: 'multislider',
hideLabel: true,
vertical: true,
height: 214,
minValue: 0,
maxValue: 100,
values: [10,90]