За последние 24 часа нас посетил 16521 программист и 1578 роботов. Сейчас ищут 878 программистов ...

Вложение данных в TabPanel в ExtJS

Тема в разделе "JavaScript и AJAX", создана пользователем Grandhustla, 4 апр 2013.

  1. Grandhustla

    Grandhustla Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    2
    Симпатии:
    0
    Здравствуйте, дорогие форумчане! Озадачился разработкой приложения на ExtJS. В интернете есть, конечно, документация на русском и примеры, но их оказалось недостаточно для понимания. Английский знаю плохо.
    В общем следующая ситуация - создал рабочую среду. сделал west & center позиционирование элементов. т.е. два элемента - меню пользователя, и рабочая среда (в рабочей среде находится 6 вкладок.) Так вот проблема в следующем. Не могу загрузить ни одну из панелей содержимое. не понимаю как это сделать. Для объявления закладок используем items : { }. и т.д. чем больше скобок в итемсах, тем больше вкладок. А как подключить внешний файл, например с таблицой, чтобы во вкладке была видна таблица, созданная с помощью ext.grid.panel.
    Ниже прикладываю код html и js страницы.
    HTML (test.html):
    Код (Text):
    1. <html>
    2.  
    3. <head>
    4.  
    5.     <title> ИС Учета Исходящей Корреспонденции </title>
    6.    
    7.     <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    8.     <script type="text/javascript" src="extjs/ext-debug.js"></script>
    9.     <script type="text/javascript" src="komponovka.js"></script>
    10.     <script type="text/javascript" src="extjs/ext-all.js"></script>
    11.     <script type="text/javascript" src="extjs/s_serv.js"></script>
    12.    
    13.    
    14. </head>
    15.  
    16. <body>
    17.  
    18. </body>
    19.  
    20. </html>
    JS (companovka.js)
    Код (Text):
    1. Ext.onReady(function(){
    2.     Ext.QuickTips.init();
    3.         var west = Ext.create('Ext.Panel', {
    4.                 split: true,
    5.                 collapsible: true,
    6.                 animCollapse: true,
    7.                 title: 'Меню Пользователя',
    8.                 width: 250,
    9.                 region: 'west',
    10.                 dockedItems: [{
    11.                        
    12.                         dock : 'top',
    13.                         xtype : 'toolbar',
    14.                         items : [{
    15.                            xtype: 'button',
    16.                            cls : 'x-btn-text-icon',
    17.                            icon : 'images/add.gif',
    18.                            text: 'Добавить',
    19.                            tooltip: 'Зарегистрировать новую корреспонденцию'
    20.                         }]
    21.                     }]
    22.             });
    23.         var viewport = Ext.create('Ext.container.Viewport', {
    24.             renderTo : Ext.getBody(),
    25.             layout : {
    26.                     type : 'border',
    27.                     padding : '5'
    28.                 },
    29.             items : [ west,
    30.             {
    31.                 layout : 'fit',
    32.                 padding : '0, 0, 5, 0',
    33.                 title : '<h3 align = center> ИС Учета Исходящей Корреспонденции',
    34.                 region : 'north',
    35.             },
    36.            
    37.             Ext.create('Ext.tab.Panel', {
    38.                     region: 'center', // Положение на странице
    39.                     activeTab: 0,     // Первая вкладка активна "по умолчанию"
    40.                     items: [ {
    41.                         xtype : 'tabpanel',
    42.                         region : 'center',
    43.                         title : 'Справочник служб'
    44.                     },  {
    45.                         region : 'center',
    46.                         title : 'Справочник Станций',
    47.                         html : '12124'
    48.                     },  {
    49.                         region : 'center',
    50.                         title : 'Справочник Классов',
    51.                         html : '12124'
    52.                     },  {
    53.                         region : 'center',
    54.                         title : 'Справочник Пользователей',
    55.                         html : '12124'
    56.                     },  {
    57.                         region : 'center',
    58.                         title : 'Реестр Корреспонденции',
    59.                         html : '12124'
    60.                     }]
    61.                 })]
    62.         });
    63. });