ExtJS - UI组件 - Breadcrumb

更新记录
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587144.html
2022年8月15日 发布。
2022年8月13日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

说明#

Ext.toolbar.Breadcrumb

面包屑面板的xtype为breadcrumb

注意：面包面板的数据来源为Ext.data.TreeStore

实例：简单使用#

测试使用的Store

Ext.define('PandaApp.store.MainMenu', {
    extend: 'Ext.data.TreeStore', //设置继承
    alias: 'mainmenu',  //设置别名
    root: {  //设置根节点
        text: 'Panda app',  //节点文本
        expanded: true,     //默认展开
        children: [
            {
                text: 'Modules',
                expanded: true,
                children: [
                    { leaf: true, text: 'Employees'},
                    { leaf: true, text: 'Customers'},
                    { leaf: true, text: 'Products'}
                ]
            },
            {
                text: 'Market',
                expanded: true,
                children: [
                    { leaf: true, text: 'Sales'},
                    { leaf: true, text: 'Budgets'},
                    { leaf: true, text: 'SEO'},
                    { leaf: true, text: 'Statistics'}
                ]
            },
            {
                text: 'Support',
                iconCls:'help-16',
                children: [
                    { leaf: true, text: 'Submit a ticket'},
                    { leaf: true, text: 'Forum'},
                    { leaf: true, text: 'Visit our web site'}
                ]
            },
            { 
                leaf: true,
                text: 'Reports'
            },
            {
                leaf: true,
                text: 'Charts'
            }
        ]
    },
    proxy: {  //设置代理
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

代码：

{
    xtype : 'breadcrumb',  //面包面包
    dock: 'top',
    store: Ext.create('PandaApp.store.MainMenu'),
    showIcons: true,
}