php生成extjs类

这段时间研究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];
	}
}
?>