Как переместить панель панели управления ExtJS в другой столбец

Демоверсия ExtJS 6 Portal начинается с 3 столбцов по умолчанию. Как создать новую панель в новом столбце, начиная с конца существующей «строки», а не запускать новую строку? Вы можете вызвать addNew, чтобы добавить панель в панель инструментов в любом столбце, который вы хотите. Затем вы можете перетащить новую панель вверху справа, чтобы сделать четвертый столбец.Как переместить панель панели управления ExtJS в другой столбец

Например, если вы загрузите пример: http://examples.sencha.com/extjs/6.0.0/examples/classic/portal/index.html

и запустить эту команду в консоли, он создает новую панель, которая занимает всю ширину в новой строке: Ext.ComponentQuery.query ('dashboard') [0] .addNew («акции», 3, 1);

Я хочу, чтобы это было показано в четвертой колонке справа от «Главных историй CNN».

источник

2016-03-09 Tulvan

В примере, который вы добавили, мы видим, что у нас есть тип макета column, это, конечно, предположение, так как вы не прикрепили код.

В соответствии с этим новый элемент подгонит себя к пространству страницы и там, чтобы идти вниз.

Чтобы достичь желаемого, добавьте контейнер в номер позиции 3 типа макета Vbox и внутри вы можете элементы один за другим.

источник

2016-03-10 06:30:55 aviram83

Эта демонстрация использует xtype панели управления, которую вы должны настроить columnWidths, чтобы заставить ее работать. Их демонстрация, если вы запустите команду, Ext.ComponentQuery.query ('dashboard') [0] .columnWidths, вы видите, что у них есть только 3, что объясняет, почему вы не можете добавить четвертый столбец. Вам нужно будет выяснить, как добавить столбец в панель инструментов, а затем добавить элементы. Это потребует изменения размеров столбцов, которые уже были отображены компонентом панели мониторинга. –

Спасибо, Чад. Согласен. Должен быть какой-то метод добавления этого столбца, но я не могу его найти. Я попытался разоблачить события на панели приборов, чтобы точно увидеть, что происходит, когда вы перетаскиваете панель вверх вправо-вверху, но ничего не видите. aviram83, я сделаю это. Я бы ожидал, если я добавлю компонент на этом уровне, что приборная панель не узнает его, но я попробую его и обновить вопрос с результатами. – Tulvan

Вот решение. Вам необходимо обновить массив столбцов columnWidths и отдельный атрибут columnWidth. Код выглядит так:

// create the new column 
Ext.ComponentQuery.query('dashboard')[0].createColumn(); 

// shrink column 0 by some amount to make space for the new column 
Ext.ComponentQuery.query('dashboard')[0].columnWidths[0] = 0.25; 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[0].columnWidth = 0.25; 

// shrink column 1 by some amount to make space for the new column 
Ext.ComponentQuery.query('dashboard')[0].columnWidths[1] = 0.25; 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[1].columnWidth = 0.25; 

// shrink column 2 by some amount to make space for the new column 
Ext.ComponentQuery.query('dashboard')[0].columnWidths[2] = 0.25; 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[2].columnWidth = 0.25; 

// set the new column width 
Ext.ComponentQuery.query('dashboard')[0].columnWidths.push(0.25); 

// add a part to the new column 
Ext.ComponentQuery.query('dashboard')[0].addView({ 
    type: 'rss', 
    feedUrl: 'http://feeds.feedburner.com/sencha' 
}, (3), 1); 

// update the layout so all the column sizing takes effect 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[0].ownerCt.updateLayout();

источник

2016-03-10 21:40:48 Tulvan

Как переместить панель панели управления ExtJS в другой столбец

ответ

Смежные вопросы