嗨，我开始了解 extjs。我偶然发现了我无法解决的第一个问题。我用 admin template .我通过添加 NavigationTree 另一个项目创建了一个新页面:
项目名/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
}
]
}
});
项目名/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'
// }
]
});
项目名/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 () {
}
});
项目名/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
}]
});
我看到一个表格标题，但没有加载数据，怎么了？
最佳答案
听起来你需要 Ext.toolbar.Paging .现在，我不知道它是否适用于 dataview，所以我将其更改为 grid。如果没有 Fiddle 示例，我无法对此进行测试，但它应该看起来像这样:
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
}]
}
]
试一试。
关于javascript - Extjs 显示网格表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39323986/