5. Ext JS - Панели

Последнее обновление Dec 5th, 2019 | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

В этом уроке мы узнаем немного больше о 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.