Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    aperez is on a distinguished road

      0  

    Default Align items in layout HBOX

    Align items in layout HBOX


    Hi,

    it's possible align independently the items of the hbox?
    In the below image i want align the item "Titulo" in the middle of hbox and the images at the bottom of the hbox.

    thank's

    Viewport.jpg


    PHP Code:
    Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL '$VERSION_EXTJS$/resources/images/default/s.gif';
     
    var 
    img1 = new Ext.BoxComponent({
       
    autoEl:{
         
    tag'img'
        
    ,src'/ima/apl_sopor/an_clte.gif'
        
    ,style'cursor:pointer'
        
    //,onClick: 'prueba(e)'
       

      ,
    id'img1'
      
    ,style'border:1px solid #ff0000'
      
    ,margins'2 2 2 2'
    });
    var 
    prueba = function (){
      
    alert('text');
    }
     
    /*var element = img1.getEl();
    element.on('click', prueba.createDelegate(this));*/
     
    var img2 = new Ext.BoxComponent({
      
    autoEl:{
         
    tag'img'
        
    ,src'/ima/apl_sopor/ped_ent.gif'
      
    }
      ,
    style'border:1px solid #ff0000'
      
    ,margins'2 2 2 2'
    });
    var 
    img3 = new Ext.BoxComponent({
      
    autoEl:{
        
    tag'img'
       
    ,src'/ima/apl_sopor/facturacion_clientes.gif'
      
    }
      ,
    style'border:1px solid #ff0000'
      
    ,margins'2 2 2 2'
    });
    var 
    img4 = new Ext.BoxComponent({
      
    autoEl:{
        
    tag'img'
       
    ,src'/ima/apl_sopor/facturacion_clientes.gif'
      
    }
      ,
    style'border:1px solid #ff0000'
      
    ,margins'2 2 2 2'
    });
     
    var 
    p1 = new Ext.Panel ({
      
    html'Panel 1'  
    });
    var 
    p2 = new Ext.Panel ({
      
    html'Panel 2'  
    });
     
    <!-- 
    ACORDEON -->
    var 
    acc = new Ext.Panel({
       
    layout:'accordion'
      
    ,id'myAcc'
      
    ,border:false
      
    ,defaults: {
            
    // applied to each contained panel
            
    bodyStyle'padding:15px'
       
    }
      ,
    items:[{
          
    title:'Acc 1'
          
    ,html'Contenido subpanel 1'
          
    ,bordertrue
       
    },{
          
    title:'Acc 2'
         
    ,html'Contenido subpanel 2'
         
    ,borderfalse
       
    },{
          
    title:'Acc 3'
         
    ,html'Contenido subpanel 3'
         
    ,borderfalse
       
    }]
    });
     
    var 
    sp = new Ext.Spacer({
      
    flex1
    });
    var 
    sp2 = new Ext.Spacer({
      
    flex1
    });
    var 
    titulo = new Ext.BoxComponent({
      
    html'Bienvenido a Datadec, S.A.'
     
    ,style'border:1px solid #00ff00'
    });
    var 
    v1 = new Ext.Viewport({
      
    renderToExt.getBody()
     ,
    layout'border'
     
    ,items: [{
        
    region'north'
       
    ,height90
       
    ,items: [img1,img2,sp,titulo,sp2,img3]
       ,
    layout: {type:'hbox'align'center'}  
      },{
        
    region'west'
       
    ,width90 
       
    ,splittrue
       
    ,html'test'
      
    },{
        
    region'center'
       
    ,id'rgCenter'
       
    ,layout'fit'
       
    ,items: [acc]
      },{
        
    region'east'
       
    ,width200
       
    ,splittrue
       
    ,items: [p1,p2]
       ,
    layout'vbox'      
       
    ,layoutConfig:{
          
    align'stretch'
       
    }
      },{
        
    region'south'
       
    ,xtype'panel'
       
    ,html'Panel South'
      
    }]
    });
     
    }); 
    //end onReady 
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    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


    No you can't.

    You would need to use a ToolbarLayout or nested VBox/HBoxLayouts.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    aperez is on a distinguished road

      0  

    Default


    Condor, thank's for your answer.
    Please, you can put an example of VBox/HBoxLayouts or ToolbarLayout?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    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


    Forget my previous comment.

    The easiest solution is to give the images a top margin (using the 'margins' config option) so they end up at the buttom.

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    aperez is on a distinguished road

      0  

    Default


    [SOLVED]

    ok, is a good idea !! Work fine !!

    var titulo = new Ext.BoxComponent({
    html: 'Bienvenido a casa.'
    ,style: 'border:1px solid #00ff00'
    ,margins: '20 0 0 0'
    });


Similar Threads

  1. Does hbox layout replace the RowFit Layout?
    By brookd in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 15 Jul 2009, 10:30 AM
  2. [3.0 RC3]Issue with HBox layout and Align Middle
    By robertoroberto in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 6 Jul 2009, 12:43 AM
  3. Align items in a formPanel
    By sfssousa in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 28 May 2009, 4:07 PM

Thread Participants: 1

Tags for this Thread