[SOLVED]textarea in panel - not rendering?

[alloftheabove]

When I put an Ext.form.TextArea inside an Ext.Panel, the TextArea does not show up. It doesn't even show up if I put it in a FormPanel attached to the Ext.Panel. Why isn't it showing up?


//Ext.ux.CodeEditor
//Created by Alex 'Xander' Crennell

Ext.namespace('Ext.ux');

Ext.ux.CodeEditor = function(cfg){
Ext.apply(this, cfg);
Ext.ux.CodeEditor.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.CodeEditor, Ext.Component, {
width: this.width || 400,
height: this.height || 300,
renderTo: this.renderTo || Ext.getBody(),

initComponent: function(){
Ext.ux.CodeEditor.superclass.initComponent.call(this);
},

onRender: function(ct, position){
this.el = new Ext.Panel({
parentEl: ct,
title: 'Ext.ux.CodeEditor',
width: this.width,
height: this.height,
cls: 'ux-cde'
});

this.textarea = new Ext.form.TextArea({ //<---- Not showing up!
grow: true
});

this.formPanel = new Ext.form.FormPanel({
items: this.textarea
});

this.numPanel = new Ext.Panel({
region: 'west'
});

this.centralPanel = new Ext.Panel({
region: 'center',
items: this.formPanel
});

this.borderPanel = new Ext.Panel({
layout: 'border',
items: [this.numPanel, this.centralPanel]
});

this.el.add(this.borderPanel);

this.el.render(this.renderTo);
},

afterRender: function(){
Ext.ux.CodeEditor.superclass.afterRender.call(this);
}
});

Ext.onReady(function(){
editor = new Ext.ux.CodeEditor({renderTo: Ext.getBody()});
}, {delay: 1000});

[[email protected]]

There is a HELP section.

How do you expect it to render if you're not applying it to your component's layout? Just because you create an internal reference, doesn't mean that it's going to appear magically.

[alloftheabove]

when I load the html page that the above code is attached to, I can find the textarea in the panel html using firebug.

EDIT: I'm not sure of what you mean by applying it to my components layout...

[alloftheabove]

Guess what, I figured it out! I figure it's something like what you said.

I figured it out using a javascript application that I had made using Ext js, it was that I needed to create this.el last, and to make it the borderPanel, then call superclass.render like so:
//Ext.ux.CodeEditor
//Created by Alex 'Xander' Crennell

Ext.namespace('Ext.ux');

Ext.ux.CodeEditor = function(cfg){
var config;
if(cfg){
Ext.apply(this, cfg);
};
Ext.apply(this, {
allowDomMove: false,
width: this.width || 400,
height: this.height || 400,
renderTo: this.renderTo || Ext.getBody()
});
Ext.ux.CodeEditor.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.CodeEditor, Ext.Component, {

initComponent: function(){
Ext.ux.CodeEditor.superclass.initComponent.call(this);
},

onRender: function(ct, position){
this.textarea = new Ext.form.TextArea();
this.textFitPanel = new Ext.Panel({
layout: 'fit',
items: this.textarea
});

this.centerPanel = new Ext.Panel({
region: 'center',
items: this.textFitPanel
});

this.numPanel = new Ext.Panel({
region: 'west'
});

this.el = this.container = new Ext.Panel({
allowDomMove: this.allowDomMove,
width: this.width,
height: this.height,
title: 'Ext.ux.CodePanel',
items: [this.numPanel, this.centerPanel],
renderTo: this.renderTo
});

Ext.ux.CodeEditor.superclass.onRender.call(this);
},

afterRender: function(){
Ext.ux.CodeEditor.superclass.afterRender.call(this);
}
});

Ext.onReady(function(){
editor = new Ext.ux.CodeEditor();
}, {delay: 1000});This is great! Now I can work on getting it to look somewhat better, I did set up a fit Panel for the textarea ( which renders now ), however it does not fit the height of this.el...Wierd. But that is easily enough figured out using firebug. Woohoo!

EDIT: How do I mark this thread as solved? I couldn't find it under thread tools.

[[email protected]]

you edit the subject to [SOLVED]