js 文件在这里我再次在三个选项卡中创建了三个选项卡我在一个文件中创建了一些面板。现在我想将此文件更改为 EXTJS 的 MVC 架构。所以，请告诉我。Ext.onReady(function() {
//-----------------------------------------------Displaying Data In Grid-----------------------------------------------
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
},{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var columndata = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
autoScroll: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
/*height: 200,
width: 500,*/
renderTo: Ext.getBody()
});
//-----------------------------------------------End Displaying Data---------------------------------------------------
//-------------------------------------------------Displaying series chart in FS Set-----------
/* var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5']
});*/
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
model: 'Chart',
proxy: {
type: 'ajax',
url: 'json/series.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});
var series = Ext.create('Ext.chart.Chart', {
//--> if we didn't put this with in comment this chart will be display on backside also for first time loading
// renderTo: Ext.getBody(),
width: 500,
height: 200,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
//-------------------------------------------------End Series Chart----------------------------
//-------------------------------------------------Yield Cureve-Graph panel-ColumnChart.json Start Here-----------------------------------------------
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: ['name', 'data']
});
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'json/ColumnChart.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});
var Panel= Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 230,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
});
//-----------------------------------------------Chart End Here------------------------------------------
//-----------------------------------------Pie Chart Start Here---------------------------------------
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: ['name', 'data']
});
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'json/PieChart.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});
var piechart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 300,
height: 230,
animate: true,
//autoScroll: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 100,
height: 28,
renderer: function (storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function (rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 10
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '13px Arial Black'
}
}]
});
//-----------------------------------------Pie Chart End Here-----------------------------------------
var one = Ext.create('Ext.panel.Panel', {
title: 'Yield Curves',
url:'<img src="images/sencha.jpg" />',
// icon: 'images//sencha.jpg',
layout: 'card',
deferredRender: true,
title: 'first tab',
layout: {
type: 'hbox',
align: 'stretch',
padding: 10
},// configuring tab width
tabConfig: {
width: 250
},
defaults: {
flex: 1
},
items: [{
xtype: 'container',
margins: '0 5 0 0',
layout: {type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'first',
margins: '0 0 5 0'
}, {
title: 'second',
items:[columndata]
}]
}, {
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'third',
items:[Panel],
margins: '0 0 5 0'
}, {
title: 'fourth',
items:[piechart]
}]
}]
});var two = Ext.create('Ext.panel.Panel', {
title: 'FX Set',
layout: {
type: 'hbox',
align: 'stretch',
padding: 10
},
tabConfig: {
width: 250
},
defaults: {
flex: 1
},
items: [{
xtype: 'container',
margins: '0 5 0 0',
layout: {type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'first',
margins: '0 0 5 0'
}, {
title: 'second',
items:[series]
}]
}]
});
var three = Ext.create('Ext.panel.Panel', {
title: 'Market Data',
layout: {
type: 'hbox',
align: 'stretch',
padding: 10
},
tabConfig: {
width: 250
},
defaults: {
flex: 1
},
items: [{
xtype: 'container',
margins: '0 5 0 0',
layout: {type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'first',
margins: '0 0 5 0',
width:1000
}, {
title: 'second'
}]
}, {
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
margins: '0 0 5 0',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title:'third',
margins: '0 0 5 0'
}/*, {
title: 'Purchase History'
}*/]
}]
});
var contentPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
margins: '0 5 5 0',
activeTab: 0,
collapsible: false,
autoScroll: true,
items: [one, two,three]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
margins: 5,
height: 20,
xtype: 'container',
//html: 'Logo Here'--> Only for text
// for inserting image this code
html:'<marquee>'+'<blink>'+'Market Data Viewer'+'</blink>'+'</marquee>'+
" "+
" "+
" "+
" "+
" "+
" "+
" "+
" "+
" "+new Date()
},
{
xtype:'datefield',
//label:'Date',
format : 'm/d/Y h:i:s A'
//value: new Date()
},/*mainMenu,*/ contentPanel]
});
});