Форум

blackfox · #1 (**permalink**) 18.11.2011, 14:22

Здравствуйте!
Помогите решить простенькую задачку.
Просто надо расположить компонент по центру но не получается. Может кто кинет примерчик?

<script>
Ext.onReady(function(){
    
var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        layout:'form',
        defaultType: 'textfield',
        border: false,
        hideBorders: true,
        plain:true,
        labelWidth: 180,
    items: [
      {xtype:'textfield', id:'text', fieldLabel:'', value : 'Поле которое надо центрировать', width: 200},
      {xtype:'numberfield', id:'year', fieldLabel:'Тест 1', value : ''},
      {xtype:'numberfield', id:'month', fieldLabel:'Тест 2', value : '1'},
      {xtype:'checkbox', id:'inv', fieldLabel:'Тест 3'}




           ]
    });

var win = new Ext.Window({
        title: 'Ia?aiao?u io?aoa',
        width: 400,
        height: 200,
        layout: 'fit',
        border: false,
        hideBorders: true,
        plain:true,
        items: [form]
    }).show();
    
    
});

</script>

центрировать нужно первое поле xtype:'textfield' Прошу помощи! layout и layoutConfig пробовал и align что то не действует. наверное что то не то делаю так как с компонентом всего неделю работаю...

Pavel M. · #2 (**permalink**) 18.11.2011, 14:56

можно просто стилем

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  
  <script type='text/javascript' src='http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js'></script>
  <link rel="stylesheet" type="text/css" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">

<script>
Ext.onReady(function() {

var form = new Ext.form.FormPanel({
        renderTo: document.body,
    items: [
      {xtype:'textfield', id:'text', fieldLabel:'', value : 'Поле которое надо центрировать', width: 200, style:'margin: 5px auto'},
      {xtype:'numberfield', id:'year', fieldLabel:'Тест 1', value : ''},
      {xtype:'numberfield', id:'month', fieldLabel:'Тест 2', value : '1'},
      {xtype:'checkbox', id:'inv', fieldLabel:'Тест 3'}
     ]
    });
    
});

</script>
  
</body>
</html>

blackfox · #3 (**permalink**) 18.11.2011, 15:57

спасибо! Еще нашел layout : 'absolute' x и y. И есть вопрос если использовать его то на всех ли разрешениях экрана элементы будут корректно отображатся в окне.

Форум

Справочник

Discord чат

Курсы javascript