1
不會有人知道如何使用相同的商店圖表和網格 actualy，問題是如何繪製代表在這個例子中ExtJS的網格和圖表
http://www.mysamplecode.com/2012/06/extjs-local-storage-example.html
代碼產品類別價格柱狀圖：
<!DOCTYPE html>
<html>
<head>
<title>ExtJs 4 Local Storage Example</title>
<link rel="stylesheet" type="text/css"
href="extjs-4.0.1/resources/css/ext-all.css">
<script type="text/javascript" src="extjs-4.0.1/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'myApp',
appFolder: 'app',
controllers: [
'ItemMaster'
],
//數據容器
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
height: 250,
width: 500,
margin: '5 5 5 5 ',
layout: 'fit',
items: [
{
xtype: 'itemList'
}
]
});
}
});
//模型
Ext.define('myApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
'itemNumber',
'description',
'category',
'price',
]
});
//商店
Ext.define('myApp.store.Products', {
extend: 'Ext.data.Store',
model: 'myApp.model.Product',
autoLoad: true,
proxy: {
type: 'localstorage',
id : 'myProxyKey'
}
});
//視圖
Ext.define('myApp.view.ItemList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.itemList',
title : 'List of my Store Products',
store : 'Products',
dockedItems: [{
xtype: 'pagingtoolbar',
store : 'Products',
dock: 'bottom',
displayInfo: true,
items: [
{
xtype: 'tbseparator'
},
{
xtype : 'button',
text: 'Add Product',
action: 'add'
}
]
}],
initComponent: function() {
this.columns = [
{
header: 'Item Number',
dataIndex: 'itemNumber',
flex: 1
},
{
header: 'Description',
dataIndex: 'description',
flex: 2
},
{
header: 'Category',
dataIndex: 'category',
flex: 1
},
{
header: 'Price',
dataIndex: 'price',
flex: 1
}
];
this.callParent(arguments);
}
});
//形式添加和編輯
Ext.define('myApp.view.ItemEdit', {
extend: 'Ext.window.Window',
alias : 'widget.itemEdit',
title : 'Product Maintenance',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'itemNumber',
fieldLabel: 'Item Number',
allowBlank: false,
msgTarget: 'side'
},
{
xtype: 'textfield',
name : 'description',
fieldLabel: 'Description',
allowBlank: false,
msgTarget: 'side'
},
{
xtype: 'combobox',
name : 'category',
fieldLabel: 'Select Category',
store: ["Electronics","Software","Gaming"],
queryMode: 'local',
value: 'Electronics'
},
{
xtype: 'numberfield',
fieldLabel: 'Price',
minValue: 0.01,
maxValue: 99.99,
value: 9.99,
name: 'price'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
//控制器
Ext.define('myApp.controller.ItemMaster', {
extend : 'Ext.app.Controller',
stores : ['Products'],
models : ['Product'],
views : ['ItemList', 'ItemEdit'],
init : function() {
this.control({
'container > panel' : {
render : this.onPanelRendered
},
'itemList' : {
itemdblclick : this.editItem
},
'itemList button[action=add]' : {
click : this.addItem
},
'itemEdit button[action=save]' : {
click : this.updateItem
}
});
},
onPanelRendered : function() {
//console.log('The panel was rendered');
},
editItem : function(grid, record) {
var view = Ext.widget('itemEdit');
view.down('form').loadRecord(record);
},
updateItem : function(button) {
var win = button.up('window');
var form = win.down('form').getForm();
//check of the form has any errors
if (form.isValid()) {
//get the record
var record = form.getRecord();
//get the form values
var values = form.getValues();
//if a new record
if(!record){
var newRecord = new myApp.model.Product(values);
this.getProductsStore().add(newRecord);
}
//existing record
else {
record.set(values);
}
win.close();
//save the data to the Web local Storage
this.getProductsStore().sync();
}
},
addItem : function(button) {
var view = Ext.widget('itemEdit');
}
});
感謝
什麼問題？如果你不解釋什麼不工作 –
這是一個工作的例子，不能幫助。我需要的只是使用該網格中的數據製作圖表 – Mille07
請鏈接到您的工作示例，如果我能看到它正常工作，我可以查看它，我不會調查您的代碼在我的腦海中運行它。 –