textarea as the body of a tabpanel

[robiechahine]

hi.

In my center region i have a tabPanel.
how can I place a textarea as the body of this tabPanel.

I am trying it this way but its not working:

could anyone throw some hints please?

	var fileTabPanel = new Ext.TabPanel({
		id:'tabId',
	    title: 'kop',
	    closable: true,
	    autoScroll:true,
	    xtype: 'textarea',
	    border:false,
	    height:'auto',
	    tabTip:tabId,
	    border:true,
	    value:'my sample text'
	});
	
	centerPanel.add(fileTabPanel);
	fileTabPanel.show();

[Condor]

You can only add panels to a tabpanel, so you should use:

var fileTabPanel = new Ext.TabPanel({
  ...
  items:[{
    title: 'title-in-tab',
    layout: 'fit',
    items: [{
      xtype:'textarea',
      id:'htmlSourceCode'
    }]
  }]
});

[Animal]

or

	var fileTabPanel = new Ext.TabPanel({
		id:tabId,
	    title: node.text,
	    closable: true,
	    autoScroll:true,
	    xtype: 'tabpanel',
	    border:false,
	    height:'auto',
	    tabTip:tabId,
	    border:true,
	    items:{
                        title: 'A Big TextArea',
			bodyCfg:{tag: 'textarea', name:'htmlSourceCode'}
                        id:'htmlSourceCode'
		}
	});
	
	centerPanel.add(fileTabPanel);
	fileTabPanel.show();

[robiechahine]

Thank you very much guys.
it worked. however both of your solutions gave me a tab inside another tab. something i didnt want .

i modified the code a little and I got the result that i wanted, one tab in the center panel and inside a textarea is displayed.

However I am not so sure if this is good. can you tell me if my modification is properly done?

here is me code

var fileTabPanel = new Ext.TabPanel({
		id:tabId,
	    title: node.text,
	    closable: true,
	    autoScroll:true,
	    xtype: 'tabpanel',
	    border:false,
	    height:'auto',
	    tabTip:tabId,
	    bodyCfg:{tag: 'textarea', id:node.text+'fileEditor'},
	    border:false
	});

[Animal]

Me confused.

What do you want?

Because you can't have a TabPanel which is a textarea. It contains other elements.

[Animal]

Might you, erm, mean "Panel"????

[robiechahine]

I was just wondering if it is correct to include
the line: bodyCfg:{tag: 'textarea', id:node.text+'fileEditor'}
for my tabPanel.

I mean by doing this, is the textarea actually located in the body of this tabPanel?

[Animal]

A TabPanel contains several Panels doesn't it? Each one with different content, and it displays selector tabs along the top to select which one of its several Panels you want to show.

A textarea cannot hold these Panels.

Really, explain what you're trying to do!

[zpet731]

or

    var fileTabPanel = new Ext.TabPanel({
        id:tabId,
        title: node.text,
        closable: true,
        autoScroll:true,
        xtype: 'tabpanel',
        border:false,
        height:'auto',
        tabTip:tabId,
        border:true,
        items:{
                        title: 'A Big TextArea',
            bodyCfg:{tag: 'textarea', name:'htmlSourceCode'}
                        id:'htmlSourceCode'
        }
    });
    
    centerPanel.add(fileTabPanel);
    fileTabPanel.show();

I used your example above to create a text area within a tab panel (as doing it the xtype way creates an unappealing border). But how do I now set text within that text area, ie. how do I reach the component.

Thanks

[zpet731]

OK, I managed to do it with:

Ext.getCmp('remarks-textarea').update(r.json.remarks);

where id: 'remarks-textarea' is equivalent to your 'htmlSourceCode'. This is the correct method, right?

Thanks again