1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default textarea as the body of a tabpanel

    textarea as the body of a tabpanel


    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?

    Code:
    	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();

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

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

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    or

    Code:
    	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();

  4. #4
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default


    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

    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
    	});

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Me confused.

    What do you want?

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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default


    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?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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!

  9. #9
    Ext User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    zpet731 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    or

    Code:
        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

  10. #10
    Ext User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    zpet731 is on a distinguished road

      0  

    Default


    OK, I managed to do it with:

    Code:
    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