这段时间研究extjs的使用,用来做些前端显示。要给同事用,所以临时写了一个简单的生成extjs代码的php类。只提供了一些基本的设置。
?
?
<?php /* extjs的PHP类说明 * 方法调用说明:--开始-- *{ * PHP程序页: * $extjsChart=new extjsChart();//声明类,2011-10-26之前无需传递任何参数进去 * 创建图表:$extjsChart->create('传递画图用的数据数组','图表类型:line曲线,pie饼形图【目前只有这两种图表】','页面显示的ID','图表标题','图表宽度:500','图表高度:300','项目类型:chart') * create类里数据、图表类型为必填项! * Exp:$this->chart_line=$extjsChart->create($data_line,'line','chart_line',$data['tit'],'1024','450','chart'); * HTML页面 * 在js代码标签里加入该段即可。 * Ext.onReady(function(){ {%$loadextjsfile%}; var donut = true;//不明白 {%$chart_line%};//$chart_line为从php接收返回的extjs图表代码 }); *} * 方法调用说明:--结束-- * * 数据结构:--开始-- * { * PHP下的数据结构,在进行方法调用时,线json_encode转换成json数据,便于extjs处理 * fields用于生成图例 * fields下的键值表示相对应的线条,在饼形图里表示相对应的块 * fields有多少键值,则图表有多少条线或块 * data存储数据 * data[]['name']:曲线图中表示X轴的刻度 * 饼形图中表示每个块 * data[]['cost/线条一、线条二....']:曲线图中使用['线条一、线条二....']表示每条线的在当前X轴上刻度时的数据,与fields的键值对应 * 饼形图中使用cost来显示每个块的值 * $chartdata=array( array( "fields"=> array("线条一","线条二","....") ), array( "data"=> array("name"=>'1','线条一'=>'646487','线条二'=>'654878'), array("name"=>'1','线条一'=>'646487','线条二'=>'654878'), array("name"=>'1','线条一'=>'646487','线条二'=>'654878'), ...... * ) * ) * } * 数据结构:--结束-- * * 编辑时间:2011-10-26 * 编辑人:谭宁宁 */ class extjsChart { public $title=''; /*public $width='500'; public $height='350'; public $div='Ext.getBody()';*/ public $layout='fit'; public $items_type='chart'; function __conststruct() { $this->loadfile=$this->loadfile(); } function loadextjsfile() { $file="Ext.require(['Ext.data.*']); Ext.require('Ext.chart.*'); Ext.require('Ext.layout.container.Fit')"; return $file; } /* * 创建图表方法 * create($data,$stype,$items_type,$title) * $data为基本数据,$stype为图表的类型,分:pie饼形图、line折线图 这两个参数必须规定 * $data有固定的数据格式 * $items_type对象类型:即使用extjs创建一个什么,默认是chart图表对象 * $title:图表名称,可要可不要 */ function create($data,$stype,$div,$title='',$width='500',$height='350',$items_type='chart') { $this->data=$data; $this->stype=$stype; $this->div=$div; $this->width=$width; $this->height=$height; $json_data=json_encode($data); $this->dataname=$this->getMicrotime(); $chart=''; $chart.="window.".$this->dataname."=Ext.create('Ext.data.JsonStore',".($json_data).");"; $chart.="var panel".time()." = Ext.create('widget.panel',{ width: ".$width.", height: ".$height.", title: '$title', renderTo: '".$div."', layout: '".$this->layout."',"; $chart.=$this->items($items_type); $chart.="})"; return $chart; } /* * 在创建好的对象里新建一个items项目 * $items_type同create()方法的$tiems_type * 默认为chart图表项目 */ function items($items_type) { $items=''; $items.="items:{ xtype: '$items_type', id: '".($this->div=='Ext.getBody()' ? 'chart_'.time() : $this->div)."', animate: true, store: ".$this->dataname.", shadow: true, legend: { position: 'right'}, insetPadding: 30,"; $items.=$this->series($this->stype); $items.="}"; return $items; } function axes($data) { $axes=''; $axes.="axes:[{ type: 'Numeric', minimum: 0, position: 'left', fields: ["; //该行获取坐标轴的字段? $t=1; foreach($data['fields'] as $k=>$v) { if($k=='name') { continue;} $name.="'".$k."'"; $name.=$t<count($data['fields']) ? ',' : ''; $t++; } $axes.=$name."], grid:{odd:{opacity: 1,fill: '#ddd',stroke: '#bbb','stroke-width': 0.5}} },{ type: 'Category', position: 'bottom', fields: ['name'] }],"; return $axes; } /* * 画出线条 series() * $stype为图表的类型 * pie:饼形图 * line:折现/曲线图 */ function series($stype) { $data=$this->data; $series=''; switch ($stype) { case 'pie': $series=$this->pie(); break; case 'line': default : $series=$this->line(); break; } return $series; } function tbar() { $tbar=''; $tbar.="tbar: [{ text: 'Reload Data', handler: function() { store1.loadData(generateData(6, 20)); } }, { enableToggle: true, pressed: false, text: 'Donut', toggleHandler: function(btn, pressed) { var chart = Ext.getCmp('chartCmp'); chart.series.first().donut = pressed ? 35 : false; chart.refresh(); } }],"; return $tbar; } /* * 生成饼形图 */ function pie() { $series_pie=''; $series_pie.="series:[{ type: 'pie', field: 'cost', showInLegend:true, tips:{ trackMouse: true, width: 160, height: 60, renderer: function(storeItem, item) { var total = 0; ".$this->dataname.".each(function(rec) { total += rec.get('cost'); }); this.setTitle(storeItem.get('name') + ': ' + Math.round((total==0 ? 0 : storeItem.get('cost')/total * 100)) + '%'); } }, highlight:{ segment: { margin: 20 } }, label:{ field: 'name', display: 'rotate', contrast: true, font: '18px 幼圆'} }]"; return $series_pie; } /* * 生成折线图 */ function line() { $data=$this->data; unset($data['fields']['name']); $series_line=''; $series_line.=$this->axes($data); $series_line.='series:['; $t=1; foreach($data['fields'] as $k=>$v) { $series_line.="{type: 'line', highlight: {size: 10,radius: 1}, axis: 'left', xField: 'name', yField: '".$k."', tips:{ trackMouse: true,width: 150,height: 60, renderer: function(storeItem, item) { this.setTitle('".$k."'+'-'+storeItem.get('name')+'<br />'+storeItem.get('".$k."'));} }, markerConfig: {type: 'cross',size: 4,radius: 4,'stroke-width': 0}"; $series_line.=$t<count($data['fields']) ? '},':'}]'; $t++; } return $series_line; } /* * 创建一个表格 * 需要参数:$data,$div; * 数据格式: * array(); */ function create_grid($data,$div='Ext.getBody()',$width='',$height='') { $grid_name=$this->getMicrotime(); $grid_JS=''; $grid_JS.=" Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../ux/'); Ext.require(['Ext.data.*','Ext.grid.*','Ext.util.*','Ext.ux.data.PagingMemoryProxy','Ext.ux.ProgressBarPager']);"; $grid_data="var ".$grid_name."=Ext.create('Ext.data.ArrayStore',".json_encode($data).");"; $grid_JS.=$grid_data; $grid_table="Ext.create('Ext.grid.Panel',{"; $grid_table.=$this->width($width); $grid_table.=$this->height($height); $grid_table.=$this->rederTo($div); $grid_table.="store:".$grid_name.", columns:["; //给表格建立索引 $grid_table_t=""; $t=0; $d=','; foreach($data['fields'] as $k=>$v) { if(count($data['fields'])-$t==1) {$d='';} $grid_table_t.="{text:'".$v."',dataIndex:'".$v."',flex:1}".$d; $t++; //echo $t.'-'.$v.'-'.$d.'<br />'; } unset($t);unset($d); $grid_table.=$grid_table_t."]});"; $grid_JS.=$grid_table; return $grid_JS; } function width($width) { return $width=='' ? '' : 'width:'.$width.','; } function height($height) { return $width=='' ? '' : 'height:'.$height.','; } function rederTo($rederTo) { return $rederTo=='' ? 'Ext.getBody()' : 'renderTo:'."'".$rederTo."',"; } /* * 获取当前系统的微秒,用于返回一个extjs 对象名,extjs图表的数据对象名不能重复 */ function getMicrotime() { $time=microtime(); $t=array(); $t=explode(" ",$time); $t=str_replace('.','', $t); return 'data_'.$t[0]; } } ?>