ExtJS框架左边菜单栏的显示

Navigation.js 的代码

Ext.define('Sales.view.Navigation', {
    extend: 'Ext.tree.Panel',
    xtype: 'appNavigation',
    title: '菜单列表',
    rootVisible: false,
    lines: false,
    useArrows: true,
    store: 'NavigationStore'
});

像上面 store 的值是 'NavigationStore' 也就是在Application.js 里的 store:['NavigationStore']

NavigationStore.js存放在 app/store/NavigationStore.js

Ext.define('Sales.store.NavigationStore', {
    extend: 'Ext.data.TreeStore',

    model: 'Sales.model.NavigationModel',
    proxy : {
        type : 'ajax',
        url  : Ext.BASE_URL + '/module/getNavigationList'
    },
    autoLoad: true
});
// Ext.BASE_URL 这上常量我在 app.js 开头就已经定义好了后面请求服务器全部会使用这个
// 这里使用的了model 

NavigationModel存在放 app/modelNavigationModel.js

Ext.define('Sales.model.NavigationModel', {
    extend: 'Ext.data.Model',
    fields: ['id', 'text', 'link']
});
// 这里定义了三个字段 id 也就是 以后每个视图的 xtype类型 link是为了做预防用的 当这个视图不存在时则会跳到相应的链接 text就是菜单列表下各项菜单的名称了