1

実際にグラフとグリッドに同じストアを使用する方法を誰かが知っていますか? 問題は、この例で製品カテゴリの価格を表す棒グラフを描画する方法です

     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');
 }
});

ありがとう

4

1 に答える 1

1

同じ店舗を使用するには、チャートに同じ店舗を指定するだけです

{xtype: 'chart', store: 'Products', ...}

作業例 http://jsfiddle.net/bucg7/5/

また、ストアは ExtJS によってバックグラウンドで魔法のように作成されており、'Products' のグローバル ID が割り当てられていることも理解する必要があります。

グリッドを並べ替えると、チャートが再レンダリングされることに注意してください。この動作が望ましくない場合は、グラフのストアがグリッドからの変更をリッスンする 2 つの別個のストアが必要です。

于 2012-10-24T16:12:40.457 に答える