Chrome でこのコードを適切に処理しましたが、Firefox では何も変更されず、空白のページしか表示されません。コンソールにエラーはありません。すべてのファイルがロードされます。私はフロントエンドの開発者ではありません。Python、Ruby、および Java について書いています。しかし…一体何が起こっているのですか?! それは私の心を打つ。
そのMVCアプリには、多くのレベルのネストされたファイルがあります（コンポーネントを含む）
テンプレート
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" />
<script src="{{ STATIC_URL }}extjs/ext-dev.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ STATIC_URL }}app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
app.js
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {C300App: '/static/c300app', Ext: '/static/extjs/src'}
});
Ext.require([
]);
Ext.application({
name: 'C300',
appFolder:'/static/c300app',
autoCreateViewport: true,
controllers: ['Base'],
models: [],
views: [
'Viewport'
,'Left'
,'CenterBase'
,'Header'
,'Footer'
],
launch: function() {
}
});
ビューポート
Ext.define('C300.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires:[
'C300.view.Header'
,'C300.view.Footer'
,'C300.view.Left'
,'C300.view.CenterBase'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
border:true,
items: [
Ext.create('C300.view.Header',{
region: 'north'
}),
Ext.create('C300.view.Left',{
region: 'west'
}),
Ext.create('C300.view.CenterBase', {
region: 'center'
}),
Ext.create('C300.view.Footer',{
region: 'south'
})
]
});
this.callParent();
}
});
センターベース
Ext.define('C300.view.CenterBase', {
extend: 'Ext.tab.Panel',
alias: 'widget.centerBase',
itemId: 'centerBase',
initComponent: function() {
Ext.applyIf(this, {
stateId: 'center-panel',
collapsible: false,
animCollapse: true,
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
deferredRender: false,
activeTab: 0,
items: [{
title: 'Информация'
,closable: true
,autoScroll: true
,html: '</br><p style="margin-left:10px;">Welcome!</p>'
}]
});
this.callParent(arguments);
}
});
コントローラ
Ext.define('C300.controller.Base', {
extend: 'Ext.app.Controller',
views: [
'Viewport'
,'Left'
,'CenterBase'
,'items.ItemWorkers'
,'items.ItemOrganization'
,'items.ItemServices'
],
refs: [
{
ref: 'itemWorkers',
selector: '#itemWorkers'
},{
ref: 'itemOrganization',
selector: '#itemOrganization'
},{
ref: 'itemServices',
selector: '#itemServices'
},{
ref: 'centerBase',
selector: '#centerBase'
}
],
init: function() {
console.log('Testing log');
this.control({
'button': {
click: function() {console.log('Tab click')}
},
'#itemWorkers':{
itemclick:function(view,rec,item,index,eventObj){
this.onElementClick(rec.data.id, rec.data.text)
}
},
'#itemOrganization':{
itemclick:function(view,rec,item,index,eventObj){
this.onElementClick(rec.data.id, rec.data.text)
}
},
'#itemServices':{
itemclick:function(view,rec,item,index,eventObj){
this.onElementClick(rec.data.id, rec.data.text)
}
}
});
},
onContentChange: function onload() {
console.log('FFFFFF');
},
onElementClick: function(id, title) {
console.log('tab is:'+title);
var t = this.getCenterBase();
var g = t.items.findIndex('title', title);
if (g >= 0){
console.log(g);
t.setActiveTab(g);
} else {
t.add({
title : title,
html : 'i am tab ',
closable : true
});
var current = t.items.findIndex('title', title);
t.setActiveTab(current);
}
}
});