Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext User rotaran's Avatar
    Join Date
    Apr 2008
    Location
    Brazil
    Posts
    22
    Vote Rating
    0
    rotaran is on a distinguished road

      0  

    Smile How to get a button inside of a column layout right aligned and in the middle ?

    How to get a button inside of a column layout right aligned and in the middle ?


    Hi all,

    I have the following code.:

    [CODE]
    // Invocada depois do DOM formado.
    Ext.onReady(function() {


    /******************************************************************
    * FormPanel *
    ******************************************************************/

    var txtDataEmissao = new Ext.form.DateField({
    fieldLabel: 'Data Emissão',
    name: 'dataemissao',
    format: 'd/m/Y'
    });

    var cmbSetor = new Ext.form.ComboBox({
    fieldLabel: 'Setor',
    name: 'setor',
    anchor: '95%'
    });

    var txtRequisitante = new Ext.form.TextField({
    fieldLabel: 'Requisitante',
    name: 'requisitante',
    anchor: '96%'
    });

    var txtAplicacao = new Ext.form.TextField({
    fieldLabel: 'Aplicação',
    name: 'aplicacao',
    anchor: '98%'
    });

    var cmbGrupo = new Ext.form.ComboBox({
    fieldLabel: 'Grupo',
    name: 'grupo',
    anchor: '98%'
    });

    var btnPesquisaGrupo = new Ext.Button({
    text: 'Pesquisar',
    name: 'pesquisaGrupo'
    });

    var cmbMaterial = new Ext.form.ComboBox({
    fieldLabel: 'Material',
    name: 'material',
    anchor: '98%'
    });

    var txtUnidade = new Ext.form.TextField({
    fieldLabel: 'Unidade',
    name: 'unidade',
    anchor: '95%'
    });

    var txtQtdeDisponivel = new Ext.form.TextField({
    fieldLabel: 'Qtde. Disponível',
    name: 'qtdedisponivel',
    anchor: '95%'
    });

    var txtQtdePedida = new Ext.form.TextField({
    fieldLabel: 'Qtde. Pedida',
    name: 'qtdepedida',
    anchor: '95%'
    });

    var form = new Ext.FormPanel({
    baseCls: 'x-plain',
    labelAlign: 'top',
    bodyStyle:'padding:20px',
    items: [{
    layout: 'form',
    baseCls: 'x-plain',
    border: true,
    items: [txtDataEmissao]
    },{
    layout: 'column',
    baseCls: 'x-plain',
    anchor: '100%',
    border: true,
    items:[{
    columnWidth:.5,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [cmbSetor]
    },{
    columnWidth:.5,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtRequisitante]
    }]
    },{
    layout: 'form',
    anchor: '100%',
    baseCls: 'x-plain',
    border: false,
    items: [txtAplicacao]
    },{
    layout: 'column',
    // baseCls: 'x-plain',
    anchor: '100%',
    border: true,
    items:[{
    columnWidth:.8,
    layout: 'form',
    // baseCls: 'x-plain',
    border: true,
    items: [cmbGrupo]
    },{
    columnWidth:.2,
    layout: 'form',
    // baseCls: 'x-plain',
    border: true,
    items: [btnPesquisaGrupo]
    }]
    },{
    layout: 'form',
    anchor: '100%',
    baseCls: 'x-plain',
    border: false,
    items: [cmbMaterial]
    },{
    layout: 'column',
    baseCls: 'x-plain',
    anchor: '100%',
    border: true,
    items:[{
    columnWidth:.333,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtUnidade]
    },{
    columnWidth:.333,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtQtdeDisponivel]
    },{
    columnWidth:.333,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtQtdePedida]
    }]
    }]
    });

    /******************************************************************
    * Window *
    ******************************************************************/

    var window = new Ext.Window({
    title: 'Requisição de Material ao Almoxarifado',
    width: 700,
    height: 500,
    minWidth: 500,
    minHeight: 300,
    layout: 'fit',
    plain:true,
    buttonAlign:'center',
    closeAction:'hide', // Esconde o formul
    Attached Images

  2. #2
    Sencha User willgillen's Avatar
    Join Date
    Mar 2007
    Posts
    110
    Vote Rating
    0
    willgillen is on a distinguished road

      0  

    Default


    I've been trying to figure out how to right align a button as well. (Actually, I've been trying to figure out how to right-align anything in ExtJS layouts, and can't figure out how; even after reading many, many forum posts)...

    I'll keep watching this thread and see if someone has a clever way to right-align buttons and other form objects in a column or table layout...

  3. #3
    Ext User rotaran's Avatar
    Join Date
    Apr 2008
    Location
    Brazil
    Posts
    22
    Vote Rating
    0
    rotaran is on a distinguished road

      0  

    Default


    Hi first of all thanks for answer !

    I've put a config option that is not working 100% but can get the button "top" aligned with other items, the "right" align issue is still alive :-(

    To perform the alignment I've put a css attribute in the config options called bodyStyle: 'padding-top: 18px' below the code.:

    [CODE]
    // Invocada depois do DOM formado.
    Ext.onReady(function() {

    /******************************************************************
    * FormPanel *
    ******************************************************************/

    var txtDataEmissao = new Ext.form.DateField({
    fieldLabel: 'Data Emissão',
    name: 'dataemissao',
    format: 'd/m/Y'
    });

    var cmbSetor = new Ext.form.ComboBox({
    fieldLabel: 'Setor',
    name: 'setor',
    anchor: '95%'
    });

    var txtRequisitante = new Ext.form.TextField({
    fieldLabel: 'Requisitante',
    name: 'requisitante',
    anchor: '96%'
    });

    var txtAplicacao = new Ext.form.TextField({
    fieldLabel: 'Aplicação',
    name: 'aplicacao',
    anchor: '98%'
    });

    var cmbGrupo = new Ext.form.ComboBox({
    fieldLabel: 'Grupo',
    name: 'grupo',
    anchor: '98%'
    });

    var btnPesquisaGrupo = new Ext.Button({
    text: 'Pesquisar',
    name: 'pesquisaGrupo'
    });

    var cmbMaterial = new Ext.form.ComboBox({
    fieldLabel: 'Material',
    name: 'material',
    anchor: '98%'
    });

    var txtUnidade = new Ext.form.TextField({
    fieldLabel: 'Unidade',
    name: 'unidade',
    anchor: '95%'
    });

    var txtQtdeDisponivel = new Ext.form.TextField({
    fieldLabel: 'Qtde. Disponível',
    name: 'qtdedisponivel',
    anchor: '95%'
    });

    var txtQtdePedida = new Ext.form.TextField({
    fieldLabel: 'Qtde. Pedida',
    name: 'qtdepedida',
    anchor: '95%'
    });

    var btnFornecer = new Ext.Button({
    text: 'Fornecer',
    name: 'fornecer'
    });

    var form = new Ext.FormPanel({
    baseCls: 'x-plain',
    labelAlign: 'top',
    bodyStyle:'padding:20px',
    items: [{
    layout: 'form',
    baseCls: 'x-plain',
    border: true,
    items: [txtDataEmissao]
    },{
    layout: 'column',
    baseCls: 'x-plain',
    anchor: '100%',
    border: true,
    items:[{
    columnWidth:.5,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [cmbSetor]
    },{
    columnWidth:.5,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtRequisitante]
    }]
    },{
    layout: 'form',
    anchor: '100%',
    baseCls: 'x-plain',
    border: false,
    items: [txtAplicacao]
    },{
    layout: 'column',
    baseCls: 'x-plain',
    anchor: '100%',
    border: false,
    items:[{
    columnWidth:.875,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [cmbGrupo]
    },{
    columnWidth:.12,
    baseCls: 'x-plain',
    border: false,
    bodyStyle:'padding-top: 18px',
    items: [btnPesquisaGrupo]
    }]
    },{
    layout: 'form',
    anchor: '100%',
    baseCls: 'x-plain',
    border: false,
    items: [cmbMaterial]
    },{
    layout: 'column',
    baseCls: 'x-plain',
    anchor: '100%',
    border: true,
    items:[{
    columnWidth:.25,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtUnidade]
    },{
    columnWidth:.25,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtQtdeDisponivel]
    },{
    columnWidth:.25,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    items: [txtQtdePedida]
    },{
    columnWidth:.25,
    layout: 'form',
    baseCls: 'x-plain',
    border: false,
    bodyStyle:'padding-top: 18px; padding-left: 81px;',
    items: [btnFornecer]
    }]
    }]
    });

    /******************************************************************
    * Window *
    ******************************************************************/

    var window = new Ext.Window({
    title: 'Requisição de Material ao Almoxarifado',
    width: 700,
    height: 500,
    minWidth: 500,
    minHeight: 300,
    resizable: false,
    layout: 'fit',
    plain:true,
    buttonAlign:'center',
    closeAction:'hide', // Esconde o formul

  4. #4
    Sencha User willgillen's Avatar
    Join Date
    Mar 2007
    Posts
    110
    Vote Rating
    0
    willgillen is on a distinguished road

      0  

    Default


    I finally ended up using a toolbar, and used the "->" ExtJS built-in spacer to force all toolbar items AFTER that spacer to be right aligned.

    I believe the "->" spacer is called the "hungry spacer" or "greedy spacer" or something to that effect.

    Thanks!

  5. #5
    Ext User rotaran's Avatar
    Join Date
    Apr 2008
    Location
    Brazil
    Posts
    22
    Vote Rating
    0
    rotaran is on a distinguished road

      0  

    Thumbs up


    Quote Originally Posted by willgillen View Post
    I finally ended up using a toolbar, and used the "->" ExtJS built-in spacer to force all toolbar items AFTER that spacer to be right aligned.

    I believe the "->" spacer is called the "hungry spacer" or "greedy spacer" or something to that effect.

    Thanks!
    Thanks for share your experience !!!

Thread Participants: 1