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。否则将显示乱码。