PDA

View Full Version : [SOLVED]textarea in panel - not rendering?



alloftheabove
30 Jun 2008, 10:06 AM
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});

30 Jun 2008, 10:56 AM
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
30 Jun 2008, 12:54 PM
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
30 Jun 2008, 8:03 PM
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.

1 Jul 2008, 4:13 AM
you edit the subject to [SOLVED]