Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2010, 10:37
Интересующийся
Отправить личное сообщение для zmaxon Посмотреть профиль Найти все сообщения от zmaxon
 
Регистрация: 10.02.2010
Сообщений: 17

относительная высота
Добрый, в ext новичок, столкнулся с такой проблемой..

создаю tabpanel, добавляю tab

tab разделяю на
region: 'west', -split: true,
region: 'center',
-----region: 'north',
-----region: 'center',
----------*добавляю GridPanel*
-----region: 'south',
----------*добавляю PagingToolbar*
region: 'south', -split: true,



есть ли возможность сделать так чтобы при изменении
region: 'south', высота GridPanel менялась автоматически? т.е. подстраивалась




autoHeight пробовал не помогает


================================================== ====
и ещё такие проблемы с относительной длинной



и вот



width 100%, autoWidth и layout пререпробовал все

Последний раз редактировалось zmaxon, 01.10.2010 в 10:45.
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2010, 12:16
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

положи грид на лейаут fit и будет тебе счастье
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2010, 14:14
Интересующийся
Отправить личное сообщение для zmaxon Посмотреть профиль Найти все сообщения от zmaxon
 
Регистрация: 10.02.2010
Сообщений: 17

не выходит ничего ((

мне ещё наверное что-то с xtype: 'panel' сделать надо, см.рис



вместо 2222 - гридпанел
хочется так, при изменении south панели всё изменялось подстать





намучался с разными параметрами... могу привести исходный код

<script>
Ext.BLANK_IMAGE_URL = '/js/ext3/resources/images/default/s.gif';
   
Ext.onReady(function(){

    var tabs = new Ext.TabPanel({
        renderTo: 'tabs',
        resizeTabs: true,
        minTabWidth: 115,
        tabWidth: '100%',
        enableTabScroll: true,
        width: '100%',
        height: 570,
        
        plain: true,
        defaults: { autoScroll: true }
    });
    
    function firstTab() {
        var tab = tabs.add({
            title: 'one',
            bodyStyle: 'padding: 5px;',
            html: 'one'
        });       
        tab.show();
    }
    
    
var visitPagesFunc = function(sm,index,record,id) {
    if(id)
        var visitId = id;
    else
        var visitId = record.id;
    //Ext.Msg.alert('You Selected', visitId);
    
    document.getElementById('detailPanel').innerHTML = '';
    //t.innerHTML = '';

    var visits2 = new Ext.data.JsonStore({
        url: 'grid-row-expander2.php?id='+visitId,
        root: 'movies',
        idProperty: 'id',
        totalProperty: 'totalCount',
        fields: ['id', 'title', 'category'],
        remoteSort: true
    });
    
    var grid2 = new Ext.grid.GridPanel({
        store: visits2,
        columns: [
                {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
                { id: 'title-col',
                    header: "Title",
                    width: 180,
                    dataIndex: 'title',
                    sortable: true
                    
                },
                { header: "Category", width: 65, dataIndex: 'category', sortable: true }
            ],
        autoExpandColumn: 'title-col',
        renderTo: 'detailPanel',
        autoWidth: true,
        autoHeight: true,
        autoScroll: true,
        bodyBorder: false,
        loadMask: true,
        columnLines: true
    });

    visits2.load({ params: { start: 0, limit: 15} });
}
    

    var visits2 = new Ext.data.JsonStore({
        url: 'grid-row-expander2.php?id=18',
        root: 'movies',
        idProperty: 'id',
        totalProperty: 'totalCount',
        fields: ['id', 'title', 'category'],
        remoteSort: true
    });
    
    var grid2 = new Ext.grid.GridPanel({
        store: visits2,
        columns: [
                {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
                { id: 'title-col',
                    header: "Title",
                    width: 180,
                    dataIndex: 'title',
                    sortable: true
                    
                },
                { header: "Category", width: 65, dataIndex: 'category', sortable: true }
            ],
        autoExpandColumn: 'title-col',
        bodyBorder: false,
        //autoWidth: true,
        //autoHeight: true,
        autoScroll: true,
        loadMask: true,
        columnLines: true
    });

    visits2.load({ params: { start: 0, limit: 15} });
    
    
    ////
    
    var visits = new Ext.data.JsonStore({
    url: 'grid-row-expander.php',
    root: 'movies',
    idProperty: 'id',
    totalProperty: 'totalCount',
    fields: ['id', 'title', 'category', 'rating', 'actors',
    { name: 'length', type: 'int' },
    { name: 'price', type: 'float' }],
    remoteSort: true
});
visits.setDefaultSort('title', 'asc');

var rowExpander = new Ext.grid.RowExpander({
    tpl: new Ext.Template(
        '<div class="row-preview "><img src="img/star_yellow.png" align="left" style="padding-right:5px;"/><p>{actors}</p></div>'
    )
}); 

    var grid = new Ext.grid.GridPanel({
        store: visits,
        
        bodyBorder: false,
        columns: [
                rowExpander,
                {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
                { id: 'title-col',
                    header: "Title",
                    width: 180,
                    dataIndex: 'title',
                    sortable: true
                    
                },
                { header: "Category", width: 65, dataIndex: 'category', sortable: true },
                { header: "Rating",
                    width: 65,
                    dataIndex: 'rating',
                    sortable: true
                },
                { header: "Length",
                    width: 65,
                    dataIndex: 'length',
                    sortable: true,
                    align: 'right',
                    renderer : function(v){
                        return v + ' min';
                    } 
                },
                { header: "Price",
                    width: 65,
                    dataIndex: 'price',
                    sortable: true,
                    align: 'right',
                    renderer: Ext.util.Format.usMoney
                }
            ],
        autoExpandColumn: 'title-col',
       // renderTo: 'grid',
        width: '100%',
      //  autoHeight: true,
        height: 327,
        bodyBorder: false,
        //autoScroll: true,
        loadMask: true,
        columnLines: true,
        plugins: rowExpander,
        sm: new Ext.grid.RowSelectionModel({ 
            singleSelect: false,
            listeners: {
                     rowselect: visitPagesFunc
                   }
        })
    });

    visits.load({ params: { start: 0, limit: 15} });
    

    //////
    
    
    function addrTab() {
        var tab = tabs.add({
            title: 'two',
            layout: 'border',
            border: false,
            closable: true,        
            items: [{
                 region: 'west',
                 title: 'left',
                 iconCls: 'icon-filter',
                 collapsible: true,
                 xtype: 'panel',
                 split: true,
                 width: 220,
                 html: 'left'
              },{
                  region: 'center',
                  xtype: 'panel',
                  
                  autoScroll: true,
                  items: [{
                     region: 'north',
                     xtype: 'panel',
                     bodyBorder: false,                     
                     html: '1111'
                  },{
                     region: 'center',
                     xtype: 'panel',
                    
                    // bodyBorder: false,
                     
                     autoScroll: true,
                     
                    // items: [grid]
                    html: '2222'
                  },{
                     region: 'south',
                     xtype: 'panel',
                     html: '3333'
                     /*    
                     bodyBorder: false,                         
                     bbar: new Ext.PagingToolbar({
                        pageSize: 15,
                        store: visits,
                        displayInfo: true,
                        style: 'border: 0',
                        displayMsg: 'Displaying movies {0} - {1} of {2}',
                        emptyMsg: "No movies found"
                     })
                     */
                  }]
                      
              },{
                 region: 'south',
                 autoScroll: true,
                 id: 'detailPanel',
                 xtype: 'panel',
                // autoHeight: true,
                 height: 150,
                
                 split: true,
                 bodyStyle: {
                        background: '#ffffff',
                        padding: '10px'
                    },
                items: [grid2]
              }]
        });       
        tab.show();
    }
    
    // Create some tabs.
    firstTab();
    addrTab();
    visitPagesFunc('','','','19');

});
  
   </script>
</head>
<body>
<div id="tabs" style="margin-top: 5px;"></div>
</body>

Последний раз редактировалось zmaxon, 01.10.2010 в 14:19.
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2010, 15:15
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

{
                     region: 'center',
                     xtype: 'panel',
                    items: [grid],
                    layout:'fit'

                  }


в гриде убери все упоминания о высоте и ширине
Ответить с цитированием
  #5 (permalink)  
Старый 01.10.2010, 15:33
Интересующийся
Отправить личное сообщение для zmaxon Посмотреть профиль Найти все сообщения от zmaxon
 
Регистрация: 10.02.2010
Сообщений: 17

>в гриде убери все упоминания о высоте и ширине
когда убираю, из всех записей остаётся только одна первая строчка
и эффекта 0
Ответить с цитированием
  #6 (permalink)  
Старый 01.10.2010, 16:32
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

ты в панеле леяут фит сделал ?
Ответить с цитированием
  #7 (permalink)  
Старый 01.10.2010, 16:46
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

В догонку
Grid Window
Ответить с цитированием
  #8 (permalink)  
Старый 01.10.2010, 17:11
Интересующийся
Отправить личное сообщение для zmaxon Посмотреть профиль Найти все сообщения от zmaxon
 
Регистрация: 10.02.2010
Сообщений: 17

я новичок, но я не дурак да в панеле

>Grid Window
ничего не разберу, слишком сложно пока
Ответить с цитированием
  #9 (permalink)  
Старый 01.10.2010, 17:17
Интересующийся
Отправить личное сообщение для zmaxon Посмотреть профиль Найти все сообщения от zmaxon
 
Регистрация: 10.02.2010
Сообщений: 17

и ещё можно вопросик, пжлста?
а что это за элемент интерфейса?

Ответить с цитированием
  #10 (permalink)  
Старый 01.10.2010, 17:20
Ламер
Отправить личное сообщение для DooMer Посмотреть профиль Найти все сообщения от DooMer
 
Регистрация: 19.02.2010
Сообщений: 295

у меня на работе картинки отключены =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
высота видимой части окна alex-crimea Общие вопросы Javascript 9 15.03.2010 20:16
Ширина и высота всего документа. mycoding Общие вопросы Javascript 0 07.02.2010 15:04
Высота скрытого содержания в теге, если для него установлено overflow:hiden; paratrooper1981 Общие вопросы Javascript 19 23.12.2009 18:26
Высота документа в опере. SunnyDay Общие вопросы Javascript 1 16.10.2008 13:27
Высота фрейма и высота загружаемого файла findman Events/DOM/Window 5 15.09.2008 03:33