Нужна помощь по ExtJS 4 chart+php
Народ, помогите новичку а то я всю голову сломал, почему не работает этот код:
line.js Ext.require('Ext.chart.*'); Ext.require('Ext.layout.container.Fit'); var store1 = Ext.create('Ext.data.JsonStore', { root:'data', fields: ['name', 'data1', 'data2'], data: [ {name:1, data1: 80, data2: 15}, {name:2, data1: 20, data2: 5}, {name:3, data1: 80, data2: 5}, {name:4, data1: 100, data2: 15} ] }); //alert(store1.name[1]); var store1 = Ext.create('Ext.data.JsonStore', { url: '/index.php' ,root: 'chart' ,fields: ['name', 'data1', 'data2'] ,autoLoad:true }); Ext.onReady(function() { var panel3 = Ext.create('widget.panel', { width: 800, height: 600, title: 'Tags', renderTo: Ext.getBody(), layout: 'fit', items: { xtype: 'chart', animate: false, store: store1, insetPadding: 30, gradients: [{ angle: 90, id: 'bar-gradient', stops: { 0: { color: '#99BBE8' }, 70: { color: '#77AECE' }, 100: { color: '#77AECE' } } }], axes: [{ type: 'Numeric', minimum: 0, maximum: 100, position: 'left', fields: ['data1'], title: false, grid: true, label: { renderer: Ext.util.Format.numberRenderer('0,0'), font: '10px Arial' } }, { type: 'Category', position: 'bottom', fields: ['name'], title: false, grid: true, label: { font: '11px Arial', renderer: function(name) { return name; } } }], series: [ { type: 'line', axis: 'left', xField: 'name', yField: 'data1', tips: { trackMouse: true, width: 110, height: 25, renderer: function(storeItem, item) { this.setTitle(storeItem.get('data1') + ' visits in ' + storeItem.get('name').substr(0, 3)); } }, style: { fill: 'url(#bar-gradient)', 'stroke-width': 3 }, markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: '#38B8BF', stroke: '#38B8BF' } }, { type: 'line', axis: 'left', xField: 'name', yField: 'data2', tips: { trackMouse: true, width: 110, height: 25, renderer: function(storeItem, item) { this.setTitle(storeItem.get('data2') + ' visits in ' + storeItem.get('name').substr(0, 3)); } }, style: { fill: '#18428E', stroke: '#18428E', 'stroke-width': 3 }, markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: '#18428E', stroke: '#18428E' } } ] } }); }); index.php <?php $i=0; while ($i<3) { $i=$i+1; $data[]= array('name' => $i, 'data1'=>300, 'data2'=>400); } echo json_encode(array('chart'=>$data,'total'=>3)); ?> index.html html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Line Chart</title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="ext/shared/example.css" /> <script type="text/javascript" src="ext/bootstrap.js"></script> <script type="text/javascript" src="Line2.js"></script> </head> <body> </body> </html> |
не понял, зачем два раза store1 в самом начале создаете?
дальше смотреть не стал |
Этот код:
var store1 = Ext.create('Ext.data.JsonStore', { root:'data', fields: ['name', 'data1', 'data2'], data: [ {name:1, data1: 80, data2: 15}, {name:2, data1: 20, data2: 5}, {name:3, data1: 80, data2: 5}, {name:4, data1: 100, data2: 15} ] }); Создает нормальный store для проверки js скрипта. А этот: var store1 = Ext.create('Ext.data.JsonStore', { url: '/index.php' ,root: 'chart' ,fields: ['name', 'data1', 'data2'] ,autoLoad:true }); должен брать аналогичные данные из php. Но почему то не понимает что ему передают. В том и затык. проблема видимо в index.php который я привел ... |
Руководство по Ext JS 4 на русском
Вот тут вот есть еще хорошее руководство по Ext JS 4 на русском: http://phpshnik.ru/ext-js-4/rukovodstvo
|
Часовой пояс GMT +3, время: 17:48. |