Panic coverage in ExtJS

Question

How to display the Breadcrumb function in ExtJS constructs.

I use Panel with borderlayout, I want to create a crumb function on top of the panel, send me some samples .....

Thanks in advance

Answer 1

Two decisions come to my mind.

• Use the title bar . You will have to manipulate the title of your panel and create a breading on it. You will need to create the text of the palette, set it to the title bar. Here is what you can do:

Initially, you can set for it only the text home title: 'Home' . At some point in time, you update it using the setTitle() method. Here is an example:

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

You must have the logic to create the anchor tag and its identifier. The identifier is important because we will use it to bind the action. Suppose I have a sayHello function, and I call it when we click "Level 1":

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

Associating this function with a click of a level 1 user is done through events:

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

2. Use the panel . If you do not plan to use the panel for this panel, you can use it as a holder for cartridges. In this method, you can add actions or toolbar elements to the toolbar. Here is an example:

 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...'); } }); 

And on the panel, you can:

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

You will need to change the CSS for the separator to show the “→” or other characters that you plan to use. In this case, you will have to use the add and remove toolbar methods to control the breading.

Answer 2

Perhaps this will help. This is a plugin ... extension for a toolbar for creating crackers. It has an example of how to use it. https://github.com/scirelli/ExtjsBreadCrumbs

Answer 3

In EXT 6, there is breadcrumb Ext.toolbar.Breadcrumb xtype: breadcrumb as a native component. It accepts a tree store and has some problems, such as updating the root of a node. Also, after updating the repository, you need to explicitly assign a selection to the newly added record.

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