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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar