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";

function getDeptNodes()
{
 // 首先输出根节点
 echo "{id:'/', text:'Online'";
 
 $conn = mysql_connect("localhost","root","root");
 mysql_select_db("gp_db",$conn);
 mysql_query("set names gb2312");
 $sqlstr = "select * from gp_area";
 $result = mysql_query($sqlstr,$conn);
 if (mysql_num_rows($result) > 0) {
  echo ", children:[";
 }
 else {
  echo "}";
  return;
 }

 // 循环输出所有工区及工区下班组节点
 $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'";
}
?>

<script language="javascript">

function addArea() {
 Ext.form.Field.prototype.msgTarget = 'side';
 var window_form_addarea = new Ext.FormPanel({ //初始化表单面板
  id: 'window_form_addarea',
  name: 'window_form_addarea',
  labelWidth: 60,  // 默认标签宽度板
  labelAlign: 'right',
  baseCls: 'x-plain', //不设置该值,表单将保持原样,设置后表单与窗体完全融合
  bodyStyle: 'padding:5px 5px 0',
  width: 350,
  frame: true,
  //border: false,
  defaults: {
   width: 320,
   height: 260
  },
  defaultType: 'textfield', //默认字段类型
  items: [{
   xtype: 'fieldset',
   title: '输入工区信息',
   defaults: {
    xtype: 'textfield',
    width: 200
   },
   items: [{
    name: 'name',
    fieldLabel: '工区名称',
    allowBlank: false,
    emptyText: '请输入工区名称',
    blankText: '工区名称不能为空'
   }, {
    name: 'descript',
    fieldLabel: '描述信息',
    allowBlank: true,
    emptyText: '描述信息可以为空'
   }, {
    name: 'address',
    fieldLabel: '办公地址',
    allowBlank: true,
    emptyText: '办公地址可以为空'
   }]
  }],
  buttons: [{
   text: '确定',
   handler: function(){ // 添加工区信息到数据库
    //Ext.MessageBox.alert('提示', '我发现你按下确定键啦。');
    if (add_window_area.getComponent('window_form_addarea').form.isValid()) {
     add_window_area.getComponent('window_form_addarea').form.submit({
      waitTitle: '请稍候',
      waitMsg: '正在提交数据,请稍候....',
      url: 'deptmgr/add_dept.php',
      //url: 'add_dept.php?action=add’,
      method: 'POST',
      success: function(form, action) {
       //Ext.MessageBox.alert('提示', '奇迹,提交成功了,恭喜。');
       var Result = action.result.success;
       if (Result == true) {
        Ext.MessageBox.alert('提示信息', action.result.message);
        window_form_addarea.form.reset();
         store.load({
         params: {
          start: 0,
          limit: 30
         }
        });
       }
       else if (Result == false) {
        Ext.MessageBox.alert('提示信息', action.result.message);
       }
       else {
        Ext.MessageBox.alert('错误提示', '后台返回了未知结果');
       }
      } ,
      failure: function(form, action) {
       Ext.MessageBox.alert('提示', '出错了,表单提交错误。');
       Ext.MessageBox.alert('提示', action.result.message);
       window_form_addarea.form.reset();
      }
     }); // End of <add_window_area.getComponent>
    } // End of <if (add_window_area.getComponent)>
   } // End of <handler: function()>
  }, {
   text: '取消',
   handler: function(){
    //window_form_addarea.form.reset();
    add_window_area.close();
   }
  }]
 });

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

function addTeam() {
 Ext.form.Field.prototype.msgTarget = 'side';
 var window_form_addteam = new Ext.FormPanel({ //初始化表单面板
  id: 'window_form_addteam',
  name: 'window_form_addteam',
  labelWidth: 60,  // 默认标签宽度板
  labelAlign: 'right',
  baseCls: 'x-plain', //不设置该值,表单将保持原样,设置后表单与窗体完全融合
  bodyStyle: 'padding:5px 5px 0',
  width: 350,
  frame: true,
  //border: false,
  defaults: {
   width: 320,
   height: 260
  },
  defaultType: 'textfield', //默认字段类型
  items: [{
   xtype: 'fieldset',
   title: '输入班组信息',
   defaults: {
    xtype: 'textfield',
    width: 200
   },
   items: [{
    name: 'name',
    fieldLabel: '班组名称',
    allowBlank: false,
    emptyText: '请输入班组名称',
    blankText: '班组名称不能为空'
   }, {
    name: 'descript',
    fieldLabel: '描述信息',
    allowBlank: true,
    emptyText: '描述信息可以为空'
   }, {
    name: 'address',
    fieldLabel: '办公地址',
    allowBlank: true,
    emptyText: '办公地址可以为空'
   }]
  }],
  buttons: [{
   text: '确定',
   handler: function(){ // 添加班组信息到数据库
    if (add_window_team.getComponent('window_form_addteam').form.isValid()) {
     add_window_team.getComponent('window_form_addteam').form.submit({
      waitTitle: '请稍候',
      waitMsg: '正在提交数据,请稍候....',
      url: 'deptmgr/add_team.php',
      method: 'POST',
      success: function(form, action) {
       var Result = action.result.success;
       if (Result == true) {
        Ext.MessageBox.alert('提示信息', action.result.message);
        window_form_addteam.form.reset();
         store.load({
         params: {
          start: 0,
          limit: 30
         }
        });
       }
       else if (Result == false) {
        Ext.MessageBox.alert('提示信息', action.result.message);
       }
       else {
        Ext.MessageBox.alert('错误提示', '后台返回了未知结果');
       }
      } ,
      failure: function(form, action) {
       Ext.MessageBox.alert('提示', '出错了,表单提交错误。');
       Ext.MessageBox.alert('提示', action.result.message);
       window_form_addteam.form.reset();
      }
     }); // End of <add_window_team.getComponent>
    } // End of <if (add_window_team.getComponent)>
   } // End of <handler: function()>
  }, {
   text: '取消',
   handler: function(){
    add_window_team.close();
   }
  }]
 });

 // 创建窗口
 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'
                }],

                layout:'border',
                border:false,
                layoutConfig: {
                    animate:false
                },

                items: [ detpList, rb_plane ]
            });
        }
        win.show();
    }
});

</script>

 

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

 另外:后台的PHP在FORM提交之后要返回的结果必须符合JSON格式,否则FORM在submit之后无法正确判断返回值,返回值的格式如下:

 

{success: xxxx, message: 'xxxxxxxxxxxx' }

 

简单的PHP例子:

 

<?php
/*!
 * Copyright(c) 2007-2010 Aavan.
 * aavan@163.com
 * http://www.xinrui.com
 */

 $mess = "{success:true, message:'这是一个测试,成功了!'}";
 $mess = iconv("gb2312","utf-8//IGNORE",$mess);
 echo $mess;
?>

 

使用iconv是因为EXTJS使用的UNICODE,而我在WINDOWS下编辑和数据库都采用了GB2312编码,所以把GB2312转成UTF-8。否则将显示乱码。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值