Хлебная крошка в ExtJS

Question

Как отобразить функцию Breadcrumb в проектах ExtJS.

Я использую Panel с borderlayout, хочу создать крошку в верхней части панели пожалуйста, пришлите мне несколько образцов .....

Заранее спасибо

Answer 1

На ум приходят два решения.

1. Используйте заголовок панели .Вам нужно будет манипулировать названием вашей панели и создать на ней крошку.Вам нужно будет создать текст крошки, установить его в заголовке панели.Вот что вы можете сделать:

Изначально вы можете установить для него только текст home title: 'Home'.В какой-то момент вы обновляете его, используя метод setTitle().Вот пример:

panel.setTitle('Home >> ' + '<a id="levelone" href="#">Level 1</a>');

Вам необходимо иметь логику для создания тега привязки и его идентификатора.Идентификатор важен, потому что мы будем использовать его, чтобы связать действие.Допустим, у меня есть функция sayHello, и я вызываю ее при нажатии «Уровень 1»:

var sayHello = function(){
    alert('Hello Text');
}

Привязка этой функции к щелчку пользователя уровня 1 выполняется с помощью событий:

var level1 = Ext.get('levelone');
level1.on('click', sayHi);

2. Используйте tbar .Если вы не планируете использовать tbar для указанной панели, вы можете использовать его в качестве держателя крошки.В этом методе вы можете добавить действия или элементы панели инструментов на панель инструментов.Вот пример:

var action = new Ext.Action({
    text: 'Level 1',
    handler: function(){
        Ext.Msg.alert('Action', 'Level 1...');
    }               
});

var action1 = new Ext.Action({
    xtype: 'tbtext',
    text: 'Level 2',
    handler: function(){
        Ext.Msg.alert('Action', 'Level 2...');
    }               
});

И на вашей панели вы можете иметь:

tbar: [
 action,'-',action1,'-',action2
]

Вам придется изменить CSS для разделителя, чтобы показать «>>» или другие символывы планируете использовать.В этом случае вам придется использовать методы add & remove Панели инструментов для управления крошкой.

Answer 2

EXT 6 имеет хлебную крошку Ext.toolbar.Breadcrumb xtype: хлебная крошка в качестве собственного компонента.Он принимает хранилище деревьев и имеет некоторые проблемы, такие как обновление корневого узла.Также после обновления хранилища вам необходимо явно вызвать выбор набора для вновь добавленной записи.

Ext.create('Ext.toolbar.Breadcrumb', {
            store: "[any tree.store]",
            useSplitButtons: false,
            enableFocusableContainer: false,
            rootVisible: true
        }

Answer 3

Может быть, это поможет.Это плагин ... расширение для панели инструментов ext, чтобы делать панировочные сухари.У него есть пример, как его использовать.https://github.com/scirelli/ExtjsBreadCrumbs