Extjs显示网格表

时间:2016-09-05 04:34:05

标签: javascript extjs extjs6 extjs-grid

嗨,我开始了解extjs。我偶然发现了我无法解决的第一个问题。我使用admin template。我通过添加NavigationTree另一个项目创建了一个新页面:

ProjectName / src / store / NavigationTree.js:

Ext.define('Wolf.store.NavigationTree', {
    extend: 'Ext.data.TreeStore',

    storeId: 'NavigationTree',

    fields: [{
        name: 'text'
    }],

    root: {
        expanded: true,
        children: [
            {
                text: 'Dashboard',
                iconCls: 'x-fa fa-desktop',
                rowCls: 'nav-tree-badge nav-tree-badge-new',
                viewType: 'admindashboard',
                routeId: 'dashboard', // routeId defaults to viewType
                leaf: true
            },
            {
                text: 'Email',
                iconCls: 'x-fa fa-send',
                rowCls: 'nav-tree-badge nav-tree-badge-hot',
                viewType: 'email',
                leaf: true
            },
            {
                text: 'Profile',
                iconCls: 'x-fa fa-user',
                viewType: 'profile',
                leaf: true
            },
            {
                text: 'Search results',
                iconCls: 'x-fa fa-search',
                viewType: 'searchresults',
                leaf: true
            },
            {
                text: 'FAQ',
                iconCls: 'x-fa fa-question',
                viewType: 'faq',
                leaf: true
            },
            {
                text: 'Pages',
                iconCls: 'x-fa fa-leanpub',
                expanded: false,
                selectable: false,
                //routeId: 'pages-parent',
                //id: 'pages-parent',

                children: [
                    {
                        text: 'Blank Page',
                        iconCls: 'x-fa fa-file-o',
                        viewType: 'pageblank',
                        leaf: true
                    },

                    {
                        text: '404 Error',
                        iconCls: 'x-fa fa-exclamation-triangle',
                        viewType: 'page404',
                        leaf: true
                    },
                    {
                        text: '500 Error',
                        iconCls: 'x-fa fa-times-circle',
                        viewType: 'page500',
                        leaf: true
                    },
                    {
                        text: 'Lock Screen',
                        iconCls: 'x-fa fa-lock',
                        viewType: 'lockscreen',
                        leaf: true
                    },

                    {
                        text: 'Login',
                        iconCls: 'x-fa fa-check',
                        viewType: 'login',
                        leaf: true
                    },
                    {
                        text: 'Register',
                        iconCls: 'x-fa fa-pencil-square-o',
                        viewType: 'register',
                        leaf: true
                    },
                    {
                        text: 'Password Reset',
                        iconCls: 'x-fa fa-lightbulb-o',
                        viewType: 'passwordreset',
                        leaf: true
                    }
                ]
            },
            {
                text: 'Widgets',
                iconCls: 'x-fa fa-flask',
                viewType: 'widgets',
                leaf: true
            },
            {
                text: 'Forms',
                iconCls: 'x-fa fa-edit',
                viewType: 'forms',
                leaf: true
            },
            {
                text: 'Charts',
                iconCls: 'x-fa fa-pie-chart',
                viewType: 'charts',
                leaf: true
            },
            {
                text: 'Views by test1',
                iconCls: 'x-fa fa-table',
                viewType: 'testdashboard',
                leaf: true
            }
        ]
    }
});

ProjectName / src / view / test / test.js:

Ext.define('Wolf.view.test.Test', {
    extend: 'Ext.Container',
    xtype: 'testdashboard',

    controller: 'test',
    viewModel: {
        type: 'test'
    },

    cls: 'test',

    scrollable: true,

    items: [
        {
            xtype: 'bi.testviews',
            userCls: 'big-100 small-100 dashboard-item shadow'
        }
//        {
//            xtype: 'network',
//
//            // 60% width when viewport is big enough,
//            // 100% when viewport is small
//            userCls: 'big-60 small-100 dashboard-item shadow'
//        },
//        {
//            xtype: 'hddusage',
//            userCls: 'big-20 small-50 dashboard-item shadow'
//        },
//        {
//            xtype: 'earnings',
//            userCls: 'big-20 small-50 dashboard-item shadow'
//        },
//        {
//            xtype: 'sales',
//            userCls: 'big-20 small-50 dashboard-item shadow'
//        },
//        {
//            xtype: 'topmovies',
//            userCls: 'big-20 small-50 dashboard-item shadow'
//        },
//        {
//            xtype: 'weather',
//            userCls: 'big-40 small-100 dashboard-item shadow'
//        },
//        {
//            xtype: 'todo',
//            height: 340,
//            userCls: 'big-60 small-100 dashboard-item shadow'
//        },
//        {
//            xtype: 'services',
//            height: 340,
//            userCls: 'big-40 small-100 dashboard-item shadow'
//        }
    ]
});

ProjectName / src / view / test / TestController.js:

Ext.define('Wolf.view.test.TestController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.test',
    requires: [
        'Ext.util.TaskRunner'
    ],
    onRefreshToggle: function (tool, e, owner) {

    },
    clearChartUpdates: function () {
    },
    destroy: function () {
    },
    onHideView: function () {
    }
});

ProjectName / src / view / test / TestModel.js:

Ext.define('Wolf.view.test.TestModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test',
    requires: [
        'Ext.data.Store',
        'Ext.data.field.Integer',
        'Ext.data.field.String',
        'Ext.data.field.Boolean'
    ],
    stores: {
        hddusage: {
            autoLoad: true,
            model: 'Wolf.model.DataXY',
            proxy: {
                type: 'api',
                url: '~api/qg/area'
            }

        },
        quarterlyGrowth: {
            autoLoad: true,
            model: 'Wolf.model.DataXY',
            proxy: {
                type: 'api',
                url: '~api/qg/bar'
            }
        },
        earnings: {
            autoLoad: true,
            model: 'Wolf.model.DataXY',
            proxy: {
                type: 'api',
                url: '~api/qg/line'
            }
        },
        servicePerformance: {
            autoLoad: true,
            model: 'Wolf.model.DataXY',
            proxy: {
                type: 'api',
                url: '~api/qg/pie'
            }

        },
        topMovies: {
            autoLoad: true,
            model: 'Wolf.model.DataXY',
            proxy: {
                type: 'api',
                url: '~api/dashboard/movies'
            }
        },
        networkData: {
            autoLoad: true,
            model: 'Wolf.model.MultiDataXY',
            proxy: {
                type: 'api',
                url: '~api/dashboard/full'
            }
        },
        visitors: {
            autoLoad: true,
            model: 'Wolf.model.MultiDataXY',
            proxy: {
                type: 'api',
                url: '~api/dashboard/visitor'
            }
        },
        bounces: {
            autoLoad: true,
            model: 'Wolf.model.MultiDataXY',
            proxy: {
                type: 'api',
                url: '~api/dashboard/counce'
            }
        },
        subscriptions: {
            autoLoad: true,
            model: 'Wolf.model.Subscription',
            proxy: {
                type: 'api',
                url: '~api/subscriptions'
            }
        },
        todos: {
            autoLoad: true,
            fields: [
                {
                    type: 'int',
                    name: 'id'
                },
                {
                    type: 'string',
                    name: 'task'
                },
                {
                    type: 'boolean',
                    name: 'done'
                }
            ],
            proxy: {
                type: 'api',
                url: '~api/dashboard/tasks'
            }
        },
        bicategories: {
            autoLoad: true,
            model: 'Wolf.Bi.model.Category',
            proxy: {
                type: 'api',
                url: 'api/v1/bi/categories'
            }
        },
        bicategoriesrecords: {
            autoLoad: true,
            model: 'Wolf.Bi.model.Records',
            proxy: {
                type: 'api',
                url: 'api/v1/bi/views/test1/records'
            }
        }
    }
});

projectNameBi / src / view / BIViews.js:

Ext.define('Wolf.Bi.view.test.BIViews', {
    extend: 'Ext.Panel',
    xtype: 'bi.testviews',
    requires: [
        'Ext.DataView'
    ],
//    cls: 'dashboard-main-chart shadow',
    height: 380,
    bodyPadding: 15,
    title: 'List',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
//    tools: [
//        {
//            type: 'wrench',
//            toggleValue: false,
//            listeners: {
//                click: 'onRefreshToggle'
//            }
//        }
//    ],
    columns: [
        {
            header: 'Name',
            dataIndex: 'name'
        }
    ],
    items: [
        {
            xtype: 'dataview',
            bind: {
                store: '{bicategoriesrecords}'
            },
            itemTpl: new Ext.XTemplate(
//                    '<tpl for=".">',
                    '<div style="margin-bottom: 10px;" class="thumb-wrap">',
                    '<br/><span>name: </span><span>{name}</span>',
                    '<br/><span>id: </span><span>{id}</span>',
                    '<br/><span>amount: </span><span>{amount}</span>',
                    //'<tpl for="views"><b>{label}</b></tpl>',
                    '</div>'
//                    '</tpl>'
                    )
        }
    ]

});

这段代码获取的数据可以得到这样的结果:

https://postimg.org/image/hf5b0ac5v/

我想让这些数据在分页表中显示。我该如何实现这一目标?我在请你帮忙。

我将BIViews.js更改为:

Ext.define('Wolf.Bi.view.test.BIViews', {
    extend: 'Ext.grid.Grid',
    xtype: 'bi.testviews',
    columns: [{
            text: 'Id',
            dataIndex: 'id',
            sortable: false,
            flex: 1
        }, {
            text: 'Name',
            dataIndex: 'name',
            sortable: false,
            flex: 1
        }, {
            text: 'Amount',
            dataIndex: 'amount',
            sortable: false,
            flex: 1
        }],
    bind: {
        store: '{bicategoriesrecords}'
    },
    dockedItems: [{
            xtype: 'pagingtoolbar',
            bind: {
                store: '{bicategoriesrecords}'
            },
            dock: 'bottom',
            displayInfo: true
        }]
});

我看到一个表头,但数据没有加载,怎么回事?

1 个答案:

答案 0 :(得分:1)

听起来你需要Ext.toolbar.Paging。现在,我不知道它是否适用于 dataview ,因此我将其更改为网格。没有小提琴的例子,我无法测试这个,但看起来应该是这样的:

items: [
    {
        xtype: 'grid', // changed from 'dataview' to 'grid'.
        bind: {
            store: '{bicategoriesrecords}'
        },
        itemTpl: new Ext.XTemplate(
            '<div style="margin-bottom: 10px;" class="thumb-wrap">',
            '<br/><span>name: </span><span>{name}</span>',
            '<br/><span>id: </span><span>{id}</span>',
            '<br/><span>amount: </span><span>{amount}</span>',
            '</div>'
        ),
        dockedItems: [{
            xtype: 'pagingtoolbar',
            bind: {
                store: '{bicategoriesrecords}'
            },
            dock: 'bottom',
            displayInfo: true
        }]
    }
]

试一试。