2
こんにちは、私はextjsを知り始めます。私は解決できない最初の問題に遭遇しました。私はadmin templateを使用します。Extjsグリッドテーブルを表示
プロジェクト名/ SRC /店舗/ 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に/ビュー/テスト/ test.js：
私はNavigationTreeに別の項目を追加することによって、新しいページを作成しました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 /ビュー/試験/ 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に/ビュー/テスト/ 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に/ビュー/ 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
}]
});
私はテーブルのヘッダを参照してくださいが、データがロードされていない、間違っていただきましたか！？
あなたが投稿した画像リンクをフォローしているときにプライバシーのエラーが発生しました。また、[Fiddle]（https://fiddle.sencha.com/）の実例を作成すれば、大いに役立ちます。 –
今すぐお試しください。 JSFiddleでは、ここではadminテンプレートを使用しているため、この例をすべて実装するのは難しいですが、実際にどのようにsenchafiddleに表示するかはわかりません。私はこれを使用していますhttp://examples.sencha.com/extjs/6.0.0/examples/admin-dashboard/#dashboard – rad11