Results 1 to 2 of 2

Thread: tabpanel question about configuration.

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    12

    Default Answered: tabpanel question about configuration.

    Hi All,

    I have 3 questions about tabpanel.

    First my code:

    Code:
    
    // ...
    items: [{         
    region: 'center',         
    xtype: 'tabpanel',                 
       items:[{                 
          rtl: false,                 
          title: '[str-err]',                  
          bodyStyle: {                     
          color: '#0f0',                     
          background: '#000',                     
          padding: '10px'                 
          },                 
       loader: {                 
          url: 'myurl',                 
          contentType: 'txt',                 
          loadMask: true,                
       },                
       listeners:
       {                    
       activate: 
       function(tab){ tab.loader.load(); }               
     }               
    }, 
    // ...
    
    This code produce a window, like this:
    img_taba.jpg

    1 Question: How to fill all tab area with black color, not only a line? This is a css problem?

    Code:
    bodyStyle: {                     
    color: '#0f0',                    
     background: '#000',                     
    padding: '10px'                
    }
    
    The 'background' don't should paint all area?

    img_tabb.jpg

    2 Question: In loade I get one txt file, see:


    Code:
    loader: {contentType: 'txt',},
    The problem here, is that my txt file use '\n' to new line! Here (I think) it need be <br>! Have any way to this control understand '\n', or convert on the fly '\n' to <br>.

    3 Question: How to put a scroll on tab?

    Thanks for help!

  2. For the tabpanel issues:

    Code:
    Ext.require('*');
    
    Ext.onReady(function() {
    
        Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            
            autoScroll: true,
            
            renderTo: document.body,
            items: [{
                title: 'Foo',
    
                // paint body of panel
                bodyStyle: {
                    color: '#0f0',
                    background: '#000',
                    padding: '10px'
                }
            }, {
                title: 'Foo-bar1',
            }, {
                title: 'Foo-bar2',
            }, {
                title: 'Foo-bar3',
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title that is very long',
                    tooltip: 'A button tooltip'
                }
            }]
        });
    
    });
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    For the tabpanel issues:

    Code:
    Ext.require('*');
    
    Ext.onReady(function() {
    
        Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            
            autoScroll: true,
            
            renderTo: document.body,
            items: [{
                title: 'Foo',
    
                // paint body of panel
                bodyStyle: {
                    color: '#0f0',
                    background: '#000',
                    padding: '10px'
                }
            }, {
                title: 'Foo-bar1',
            }, {
                title: 'Foo-bar2',
            }, {
                title: 'Foo-bar3',
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title that is very long',
                    tooltip: 'A button tooltip'
                }
            }]
        });
    
    });
    Scott.

Posting Permissions

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