EXTJS桌面显示窗口（左边:TREE，右边：PANEL），点击按钮弹出窗口编辑数据提交后台PHP。

本文介绍了如何使用EXTJS创建一个桌面应用，该应用包含一个带边框布局的窗口，窗口左侧是树形菜单，右侧是面板。文章通过解决布局问题展示了EXTJS的border布局，并提供了PHP后端处理数据提交的示例，强调返回的JSON数据格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extjs就不用多介绍了，自从看了extjs的samples后，就决心在下个项目中使用它。自己决心做一个测试项目，主要作为学习的用途。首先选择desktop为切入点。二话不说，首先拿来desktop的samples，很简单就能运行起来了，桌面上有2个快捷方式，一个grid窗口，一个accordion窗口。

第一步先做个简单的test1窗口来代替grid窗口，test1窗口要求border布局，左边是一个tree控件，右边是一个空白panel区，上部是toolbar，点击tree后右边panel能显示相关信息。这应该是一个很常见的窗口。找到了layout的demo，但添加进去后并不是一帆风顺，两个demo单独运行的时候都没问题，但放到一块儿后，test1窗口就死活不能显示。没办法，找找原因吧。

窗口不能显示的原因就是test1窗口使用了layout: border 布局，左边panel的region:west，而右边panel的region:east，问题就出在这里，使用border布局的时候，必须要有一个panel的region:center，否则将导致中断从而无法显示窗口。

设计了一个简单的窗口，代码如下：

-------------------------------------------------------------------------------------------------------------------------------------------------

<?php
/*!
* Copyright(c) 2007-2010 Aavan.
* aavan@163.com
* http://www.xinrui.com
*/
session_start();
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<?php
include "conn/conn.php";

// 循环输出所有工区及工区下班组节点
$is_firsta = 1;
while ($rows = mysql_fetch_row($result)) {
  if ($is_firsta == 1) {
   $is_firsta = 0;
  }
  else {
   echo ",";
  }
  echo "{id: 'a$rows[0]', text: '".$rows[1]."'";

  $sqlstr_team = "select * from gp_team where aid = $rows[0]";
  $res_team = mysql_query($sqlstr_team,$conn);
  if (mysql_num_rows($res_team) > 0) {
   echo ", expanded:true, children:[";
   $is_firstt = 1;
   while ($rows_team = mysql_fetch_row($res_team)) {
    if ($is_firstt == 1) {
     $is_firstt = 0;
    }
    else {
     echo ",";
    }
    echo "{id: 't$rows_team[0]', text: '".$rows_team[1]."', iconCls:'user', leaf: true}";
   }
   echo "]}";
  }
  else {
   echo "}";
  }
}
echo "]}";
}

function getPhp_addarea() {
$root_path = $_SERVER['DOCUMENT_ROOT'];
echo "'".$root_path."/admin/deptmgr/add_dept.php'";
}
?>

// 创建窗口
var add_window_area = new Ext.Window({
  title: "添加工区",
  width: 350,
  height: 350,
  modal: true,
  maximizable: true,
  items: [ window_form_addarea ]
});
add_window_area.show();
}

// 创建窗口
var add_window_team = new Ext.Window({
  title: "添加班组",
  width: 350,
  height: 350,
  modal: true,
  maximizable: true,
  items: [ window_form_addteam ]
});
add_window_team.show();
}

/*
* 部门管理程序窗口
*/
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
    id:'grid-win',
    init : function(){
        this.launcher = {
            text: '部门管理',
            iconCls:'icon-grid',
            handler : this.createWindow,
            scope: this
        };
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');
        if(!win){
   // 创建树形列表控件
   var detpList = new Ext.tree.TreePanel({
    region: 'west',
    id:'im-tree',
    title: '部门列表',
    split: true,
    width: 200,
    collapsible: true,
    margins: '3 0 3 3',
    cmargins: '3 3 3 3',
    loader: new Ext.tree.TreeLoader(),
    //loader: new Ext.tree.TreeLoader({ dataurl: 'dept_query_json.php' }),
    rootVisible:false,
    lines:false,
    autoScroll:true,
    tools:[{
     id:'refresh',
     on:{
      click: function(){
       var tree = Ext.getCmp('im-tree');
       tree.body.mask('数据读取中...', 'x-mask-loading');
       tree.root.reload();
       tree.root.collapse(true, false);
       setTimeout(function(){ // mimic a server call
        tree.body.unmask();
        tree.root.expand(true, true);
       }, 1000);
      }
     }
    }],
    root: new Ext.tree.AsyncTreeNode(
     <?php
      getDeptNodes();
     ?>
             )
        });

        // 创建右边空白区域
        var rb_plane = new Ext.Panel({
                region: 'center',
                items: [{}]
            });

   win = desktop.createWindow({
    id: 'grid-win',
    title: '部门管理',
    width:600,
    height:400,
    constrain: true,

                iconCls: 'accordion',
                shim:false,
                animCollapse:false,
                constrainHeader:true,

                tbar:[{
                text: '搜索',
     icon: "../img/page_find.png",
     cls: "x-btn-text-icon",
                    tooltip:{title:'刷新提示', text:'刷新部门树形目录'},
                    iconCls:'connect'
                },'-',{
                text: '添加工区',
                    icon: "../img/chart_pie_add.png",
                    cls: "x-btn-text-icon",
                    tooltip:'添加一个新的工区',
                    iconCls:'area-add',
                    handler: addArea
                },{
                    xtype: "tbseparator"
                },{
                text: '添加班组',
                    icon: "../img/chart_pie_add.png",
                    cls: "x-btn-text-icon",
                    tooltip:'添加一个新的班组或部门',
                    iconCls:'team-add',
                    handler: addTeam
                },{
                    xtype: "tbseparator"
                },{
                text: '编辑',
                    icon: "../img/chart_pie_add.png",
                    cls: "x-btn-text-icon",
                    tooltip:'编辑工区或班组信息',
                    iconCls:'dept-modify'
                },{
                    xtype: "tbseparator"
                },{
                text: '删除',
                    icon: "../img/chart_pie_add.png",
                    cls: "x-btn-text-icon",
                    tooltip:'删除工区或班组',
                    iconCls:'dept-del'
                }],