ExtJS三级联动菜单

一、前端js代码

// JavaScript Document

Ra.ServerFailsInfo.bydepart = function(grid_id,level,department,product,service){

	/********************  公共  ************************/
	var store = {
		'department' : new Ext.data.JsonStore({
			url: 'api/list_k.php?action=department',
			fields: ['name']}), 
		'product' : new Ext.data.JsonStore({
			url: 'api/list_k.php?action=product',
			fields: ['name']}), 
		'service' : new Ext.data.JsonStore({
			url: 'api/list_k.php?action=service',
			fields: ['name']})
	};

	// 从服务器获取查询结果
	// 先设置jsonStore，然后load
	var jsonStore = new Ext.data.JsonStore({
        url: 'api/fail_parts_bydepart.php',
		listeners:{
            'loadexception' : function(e){
				alert(e.toString());
            }
        },
        fields: [
			{name: 'name'},
			{name: 'flash'},
			{name: 'percent'}

        ]
    });
	//仅执行一次（打开时tab时默认）
	jsonStore.load({params:{
		'level'	: 'all',
		'department' : department,
		'product': product,
		'service': service
	}});



	// 定义一个对象，用于向服务器端传值
	var paras = {};                   
	paras.view_level = '公司级别';


	// 表体 —— tbar
	var tbar_depart = new Ext.Toolbar({
	    items :[{
			xtype: 'tbtext',
			text : "查看级别:"
		   },'-',

		new Ext.form.ComboBox({
			id : 'failparts-view_level',
			store: ['公司级别','部门级别','产品线级别','子分类级别'],
			allowBlank:false,
			triggerAction: 'all',
			width :100,
			displayValue :'部门级别',
			value :'部门级别',
			name : 'view_level',
			listeners : {
				'select' : function(obj, data, index){
					// obj是combobox对象，data是用户选择的值，index是索引（0,1,2...）
					vlevel = data.data.text;// 用户选择的值，此处为何是text，而不是name？
					paras.view_level = data.data.text;
					Ext.getCmp('failparts-form-department').clearValue();//通过id得到一个Component对象
					paras.department = '';  // 部门
					Ext.getCmp('failparts-form-product').clearValue();
					paras.product = '';     // 产品线
					Ext.getCmp('failparts-form-service').clearValue();
					paras.service = '';     // 子分类
					switch(vlevel){
						case '公司级别':
							Ext.getCmp('failparts-form-department').setVisible(false); 		
							Ext.getCmp('failparts-form-product').setVisible(false);  
							Ext.getCmp('failparts-form-service').setVisible(false); 		
							break;
						case '部门级别':
							Ext.getCmp('failparts-form-department').setVisible(true); 		
							Ext.getCmp('failparts-form-product').setVisible(false);  
							Ext.getCmp('failparts-form-service').setVisible(false); 		
							break;
						case '产品线级别':
							Ext.getCmp('failparts-form-department').setVisible(true); 		
							Ext.getCmp('failparts-form-product').setVisible(true);  
							Ext.getCmp('failparts-form-service').setVisible(false); 		
							break;
						case '子分类级别':
							Ext.getCmp('failparts-form-department').setVisible(true); 		
							Ext.getCmp('failparts-form-product').setVisible(true);  
							Ext.getCmp('failparts-form-service').setVisible(true); 		
							break;
						default:
							Ext.getCmp('failparts-form-department').setVisible(true); 		
					}
				}
			}
			}),'-',


		new Ext.form.ComboBox({
			id : 'failparts-form-department',
			allowBlank:false,
			store: store['department'], // 引用store
			displayField:'name',
			triggerAction: 'all',
			hidden : true,
			emptyText:'请选择部门',
			width :110,
			name : 'department',
			listeners : {
				'select' : function(obj, data, index){
					paras.department = data.data.name; //此处为何是name，而不是text？
					if(paras.view_level == '产品线级别' ||paras.view_level == '子分类级别'){
						store.product.baseParams = {'department' : encodeURIComponent(data.data.name)};
						store.product.load();
						Ext.getCmp('failparts-form-product').clearValue();
						Ext.getCmp('failparts-form-product').setVisible(true);  
					}
				}	
			}
		}),


		new Ext.form.ComboBox({
				id : 'failparts-form-product',
				store: store.product,  // 引用store
				displayField:'name',
				hidden : true,
				width    : 120,
				emptyText:'请选择产品线',
				triggerAction: 'all',
				name : 'product',
				listeners : {
					'select' : function(obj, data, index){
						paras.product = data.data.name;
						if(paras.view_level == '子分类级别'){
							store.service.baseParams = {  //把字符串作为 URI 组件进行编码
								'product' : encodeURIComponent(data.data.name),
								'department' : paras.department
							};
							store.service.load();
							Ext.getCmp('failparts-form-service').clearValue();
							Ext.getCmp('failparts-form-service').setVisible(true);
						}
					}
				}
		}),

		new Ext.form.ComboBox({
			id : 'failparts-form-service',
			store: store.service,  // 引用store
			displayField:'name',
			hidden : true,
			emptyText:'请选择子分类',
			width    : 200,
			triggerAction: 'all',
			name : 'service',
			listeners : {
				'select' : function(obj, data, index){
					paras.service = data.data.name;
				}
			}
		}),

		{
			iconCls		:	'search',
			text	: '<b>更新内容</b>',
			handler	: function() {
				switch(paras.view_level) {
					case '公司级别':
						var level = 'all';
						break;
					case '部门级别':
						var level = 'department';
						break;
					case '产品线级别':
						var level = 'product';
						break;
					case '子分类级别':
						var level = 'service';
						break;
					default:
						break;
				}
				if ( level == 'department' && paras.department == '' ) {
					Ext.Msg.alert('友情提示','请选择要查询的部门!');
					return;
				}
				if ( level == 'product' && (paras.department == '' || paras.product == '') ) {
					Ext.Msg.alert('友情提示','请选择要查询的部门-产品线!');
					return;
				}
				if ( level == 'service' && (paras.department == '' || paras.product == '' || paras.service == '' ) ) {
					Ext.Msg.alert('友情提示','请选择要查询的部门-产品线-子分类!');
					return;
				}
				// 获取选择的值
				//Ext.Msg.alert(level,paras.department + ', ' + paras.product + ', ' + paras.service);
				jsonStore.load({params:{
					'level'	: level,
					'department' : paras.department,
					'product': paras.product,
					'service': paras.service
				}});
			}
		},'->',
			Baidu.Ra.Excel(grid_id)
		]
	});


	// 表格面板的列模型
	var cm = new Ext.grid.ColumnModel([
		{header:'机型',dataIndex:'model',width:100,sortable:true}
		,{header:'部件类型',dataIndex:'parts_type',width:100,sortable:true}
		,{header:'部件总数量',dataIndex:'total',width:100,sortable:true}
		,{header:'故障数量',dataIndex:'num',width:100,sortable:true}
		,{header:'故障率',dataIndex:'percent',width:100,sortable:true}
	]);

	// 表格面板。也有Ext.FormPanel
	var panel = new Ext.grid.GridPanel({
		baseCls: 'x-plain',
		id:grid_id,
		title:'按部门统计',
		closable:true,
		cm:cm,
		store:jsonStore,
		loadMask: {
            msg: '数据获取中,请稍候...'
        },
		tbar:tbar_depart,
		region:'center'
	});
	CompanyName.Ra.tabCon.add(panel);
    CompanyName.Ra.tabCon.activate(panel);
}

二、后端php代码

require "CompanyName/Rss/Common/config.inc";
require "CompanyName/Util/util.inc";
require "CompanyName/Rss/Module/db.inc";
require	"CompanyName/Rss/Control/func.inc";
$idc	= urldecode(companyName_get_data(B_REQUEST, 'idc'));
$dep	= urldecode(companyName_get_data(B_REQUEST, 'department'));
$finance= urldecode(companyName_get_data(B_REQUEST, 'finance'));
$product= urldecode(companyName_get_data(B_REQUEST, 'product'));
$action	= urldecode(companyName_get_data(B_REQUEST, 'action'));
$iden	= urldecode(companyName_get_data(B_REQUEST, 'iden'));

$suffix	= date("Ym", time());
$table 	= "service_list";
switch($action){
  case 'service' :
	  $sql = "select distinct service as name from $table where department='$dep'";
	  if($product != '[全部]'){
		  $sql .= " and product='$product'";
	  }
	  break;
  case 'product' :
	  $sql = "select distinct product as name from $table where 1";
	  if($dep != '[全部]'){
		  $sql .= " and department='$dep'";
	  }
	 break;
  case 'getflag':
  	  break;
  default:
	  $sql = "select distinct department as name from $table";
}
$sth = $pdo->prepare($sql);
$sth->execute();
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
print json_encode($result);

三、数据库PDO

//在另一个config.php文件中，用define(key, value);方式设置用户名密码等。
$dsn = sprintf("mysql:host=%s;dbname=%s;port=%d;charset=%s", DB_HOST, DB_NAME, DB_PORT, DB_CHARSET);
try{
	$pdo = new PDO($dsn, DB_USER, DB_PASSWORD);
	$pdo->query("set names " . DB_CHARSET);
}catch(PDOException $e){
	error_log($e->getMessage());
}

$dsn = sprintf("mysql:host=%s;dbname=%s;port=%d;charset=%s", DB_HOST_BUDGET, DB_NAME_BUDGET, DB_PORT, DB_CHARSET);
try{
    $pdo_budget = new PDO($dsn, DB_USER, DB_PASSWORD);
	$pdo_budget->query("set names " . DB_CHARSET);
}catch(PDOException $e){
    error_log($e->getMessage());
}

四、companyName_get_data方法

define('B_GET', 	0);
define('B_POST', 	1);
define('B_REQUEST',2);
define('B_COOKIE', 	3);
function companyName_get_data($method=B_REQUEST, $name, $filter="B_RAW"){
	switch($method){
	case B_GET:
		$ret = isset($_GET[$name])? $_GET[$name] : NULL;
		break;
	case B_POST:
		$ret = isset($_POST[$name])? $_POST[$name] : NULL;
		break;
	case B_REQUEST:
		$ret = isset($_REQUEST[$name])? $_REQUEST[$name] : NULL;
		break;
	case B_COOKIE:
		$ret = isset($_COOKIE[$name])? $_COOKIE[$name] : NULL;
		break;
	default:
		$ret = NULL;
		break;
	}
	return $ret;
}

/* bool redirect_and_exit($url)
 *  this function alone for the reason to handle of done url 
 * @para : the full url (scheme :// host / path / script ? query # anchor);
 */
function redirect_and_exit($url){
	header("Location:$url");
	exit();
}

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]