Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Нужна помощь по ExtJS 4 chart+php (https://javascript.ru/forum/extjs/26245-nuzhna-pomoshh-po-extjs-4-chart-php.html)

svarg 02.03.2012 08:16

Нужна помощь по 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>

Pavel M. 02.03.2012 11:39

не понял, зачем два раза store1 в самом начале создаете?
дальше смотреть не стал

svarg 02.03.2012 11:59

Этот код:

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 который я привел ...

spendlively 11.01.2013 10:46

Руководство по Ext JS 4 на русском
 
Вот тут вот есть еще хорошее руководство по Ext JS 4 на русском: http://phpshnik.ru/ext-js-4/rukovodstvo


Часовой пояс GMT +3, время: 18:57.