Jump to main content Jump to doc navigation

В этом уроке мы узнаем немного больше о Ext JS, познакомившись с панелями. Панели могут заполнять области экрана. Они используются в качестве одного из строительных блоков при создании приложений или менеджера MODX.

Как всегда, нам нужно загрузить наши надежные CSS и JavaScript, чтобы MODExt мог творить свои чудеса:

<link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>

Простая панель

<html>
    <title>Панели Ext JS</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            var myPanel = new Ext.Panel({
                renderTo : document.body,
                height   : 50,
                width    : 150,
                title    : 'Простая панель',
                html     : 'Это мое содержимое',
                frame    : true
            });
        });

    </script>

    <body>
        <h1>Панели</h1>
        <div id="target_div"></div>
    </body>
</html>

RTFM

Мы еще раз укажем на оригинальные документы Ext JS от Sencha. Помните, что MODExt расширяет Ext JS версии 3, поэтому вам нужно обратиться к соответствующему источнику:

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel

Обратите внимание на различные атрибуты, доступные для объекта Panel.

  1. Ext JS - Окна сообщений
  2. Ext JS - Ajax
  3. Ext JS - Анимация
  4. Ext JS - Управление узлами
  5. Ext JS - Панели
  6. Ext JS - Расширенная сетка
  7. Ext JS - Внутри CMP