Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: textarea as the body of a tabpanel

  1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
      0  

    Default 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
    119
      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,615
    Vote Rating
    55
      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
      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,615
    Vote Rating
    55
      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,615
    Vote Rating
    55
      0  

    Default

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

  7. #7
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
      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,615
    Vote Rating
    55
      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
      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
      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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •