解析Extjs与php数据交互(增删查改)-php-IT落伍者

代码如下:

<html>
<head>
//搜索暂时没做数据是出来了但是却没法显示
<link rel="stylesheet" type="text/css" href="/js/resources/css/extallcss"/>
<script type="text/javascript" src="/js/jqueryjs"></script>
<script type="text/javascript" src="/js/extbasejs"></script>
<script type="text/javascript" src="/js/extalljs"></script>
<script type="text/javascript" src="/js/extlangzh_CNminjs"></script>
<script type="text/javascript">
ExtQuickTipsinit(); //初始化快速提示对象
function test() {
ExtMsgalert(titletestyiiext);
}
function renderSex(value) {
if (value == male) {
return "<span style=color:red;fontweight:bold;>红男</span><img src=/images/malejpg />";
} else {
return "<span style=color:green;fontweight:bold;>绿女</span><img src=/images/femalepng />";
}
}
function init()
{

//创建url访问类
var url = indexphp;
var _proxy = new ExtdataHttpProxy({url:url});
//数据问题参数
var _jsonProperty = "totalProperty";
//数据根目录参数
var _jsonRoot = "root";
//Record显示列表对应关系
var _record = [{name:id}
{name:name}
{name:pass}
{name:sex}
{name:email}];
//创建JSONReader对象需要设置记录总数根目录名称记录映射
var _reader = new ExtdataJsonReader({totelPropetty:_jsonPropertyroot:_jsonRoot}_record);
/**
* 封装一个客户端的Record对象缓存为GridPanel提供数据入口
* 需要两个必须的参数
* 提供数据的地址Proxy  代理类
* 数据的读取方式Reader 类这里通过JsonReader读取
*/
var _store = new ExtdataStore({
proxy:_proxy
reader:_reader
});
/**
ColumnModel
* 数据在页面上显示标题信息
* 顺序和Record对应
* sortable 是否排序
* dataIndex 进行对应的列对应Record中的NAME
*
* handler方法中第一个参数表示父类的对象本例中为GridPanel对象
* 第二个参数表示第几行
* 第三个参数表示第几列
*/
var _cm = new ExtgridColumnModel([
new ExtgridRowNumberer()
new ExtgridCheckboxSelectionModel()
{header:"ID"dataIndex:"id"width:sortable:truemenuDisabled:true}
{header:"用户名"dataIndex:"name"width:sortable:true}
{header:"密码"dataIndex:"pass"width:sortable:true}
{header:"性别"dataIndex:"sex"width:sortable:truerenderer:renderSex}
{header:"电子邮箱"dataIndex:"email"width:sortable:true}
]);
/////////////////////////搜索
var logins = new ExtformFormPanel({
id:myform//分配表单id
title: 按用户名搜索
width:
defaultType: textfield
frame: true
// method: POST
collapsible: true//可折叠
bodyPadding:

layout: column//列布局

margin:
items: [{
fieldLabel: 姓名
labelWidth:
id: name
}]
buttons: [{
// xtype: button
text: 搜索
margin:
handler: search
}{
// xtype: button
text: 隐藏
margin:
handler: hide
}]

renderTo: "search"
})
loginshide();
function hide()
{
loginshide();
}
///////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////
//获取数据
var ds = new ExtdataStore({

//proxy告诉我们从哪获得数据ExtdataMemoryProxy专门解析js变量
//proxy:new ExtdataMemoryProxy(data)
//通过http获取数据
proxy:new ExtdataHttpProxy({
url:url})

//获取json数据
reader:new ExtdataJsonReader({
totalProperty:totalProperty
root:root
}ExtdataRecordcreate([
{name:id}
{name:name}
{name:pass}
{name:sex}
{name:email}
]))
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//自动分页
var _pageSize = ;
var _toolbar = new ExtPagingToolbar({
store:ds
pageSize:_pageSize
displayInfo:true
displayMsg:显示第{}条到第{}条记录一共{}条
emptyMsg:暂无数据
});

//顶部工具栏按钮
var t_toolbar = [
{id:"addData"text:"用户添加"handler:addUser}""
{id:"updateData"text:"用户修改"listeners:{"click":updateUser}}""
{id:"deleteData"text:"删除选中用户"handler:removeUser}""
{id:"test"text:"测试选中"handler:chkSelects}""
{id:"search"text:"搜索"handler:jump}
];
/**
* GridPanel对象
* 数据列表页面
* 必须设置 Store 数据访问对象和标题栏显示信息
* 即 Store和ColumnModel对象
*/
var _grid = new ExtgridGridPanel({
headerAsText: false // 如果有标题栏隐藏标题栏
collapsible: true//可折叠
height:
width:
frame:true//圆角边框
store:ds
title:测试yii整合Ext
cm:_cm
bbar : _toolbar
tbar : t_toolbar
});
dsload({params:{start:limit:_pageSize}});
_gridrender(test_id);

//_gridrender();
/* 用户信息录入框验证  */
var fpanel;
function f(){
fpanel = new ExtformFormPanel
({
frame : true//边框圆角并且有背景色
labelAlign : right
waitMsgTarget : true
autoScroll : true
buttonAlign : center
items : [
{xtype:"hidden"name:"id"}
{xtype:"textfield"fieldLabel:"用户名"name:"name"anchor : ""allowBlank:false//是否允许为空
blankText:"用户名不允许为空！"labelWidth : }
{xtype:"radiogroup"fieldLabel:"性别"columns:allowBlank:falseblankText:"性别不允许为空！"items:[{boxLabel:男 name:sexinputValue:male}{boxLabel:女 name:sexinputValue:female}]}
{xtype:"textfield"fieldLabel:"密码"name:"pass"allowBlank:false//是否允许为空
blankText:"密码不允许为空！"anchor : ""}
{xtype:"textarea"fieldLabel:"电子邮箱"name:"email"allowBlank:false//是否允许为空
blankText:"邮箱不允许为空！"anchor : ""}
]
});
}

var win;
/* 增加用户  */
function addUser()
{
f();

win = new ExtWindow
({
title:"新增用户"
id:"win"
//animEl:"fly"
//layout:"fit"
width:
height:
closeAction : "close"
plain : true
modal : true// 模态窗口当打开当前窗口时后面的内容被遮挡
bodyStyle:"padding:px px"
layout:"form"
labelWidth:
items:[fpanel]
buttons:[
{text:"保存" handler :function()
{
//在保存的时候因为Id值为空所以不能转换到后台后台报类型转换异常可以将Id设值为
//在后台处理的时候对于值为的Id不获取
fpanelfindByType("hidden")[]setValue();
fpanelgetForm()submit({
url : "addphp"
method : "POST"
waitMsg : "保存数据"

success : function(form action) {
// 业务成功
ExtMessageBoxalert(提示添加成功!);
winclose();
dsload({params:{ start:limit:_pageSize} });
}
failure : function(form action) {
// 业务失败

obj = ExtutilJSONdecode(actionresponseresponseText);
ExtMessageBoxalert(提示 objerrorsreason);
winclose();

dsload({params:{ start:limit:_pageSize} });
}
});
}
}
{
text:"重置"handler:function()
{
fpanelgetForm()reset();
}
}
]
})
winshow();
// 因为重复使用window有可能在修改后fpanel中还存在数据所以要先重置

fpanelgetForm()reset();
}

/* 修改用户信息  */
function updateUser()
{
var win_;
var a = ;
f();
var selectedRecord = _gridgetSelectionModel()getSelected();
// 获得多个数据

if (selectedRecord == undefined || selectedRecord == null)
{
ExtMessageBoxalert("提示" "请先选择一条记录！");
} else {
win_ = new ExtWindow
({
title : "修改用户"
width :
height :
closeAction : "hide"
plain : true
modal : true// 模态窗口当打开当前窗口时后面的内容被遮挡
bodyStyle : "padding:px px"
//layout : "form"
layout:"fit"
labelWidth :
items : [fpanel]
buttons : [
{text:"修改" handler:function()
{fpanelgetForm()submit
({
url:"editphp"
method:"POST"
waitMsg:"数据修改中"
success:function(formaction)
{
win_hide();
ExtMessageBoxalert("提示""数据修改成功");
_dsreload();
}
failure : function(form action) {
win_hide();
ExtMessageBoxalert("提示""<font color=red>数据修改失败</font>");
_dsload();
}
});
}
}
{
text : "重置"handler:function()
{
fpanelgetForm()reset();
}
}
{
text: 关闭handler: function()
{
win_close();
}
}
]
});
}
win_show();
// 将选中的数据load到window中显示
//alert(win_);
win_getComponent()getForm()loadRecord(selectedRecord);

}

/* 删除用户  */
function removeUser(btn)
{
var selectedRecord = _gridgetSelectionModel()getSelected();
if (selectedRecord == undefined || selectedRecord == null)
{
ExtMessageBoxalert("提示" "请先选择一条记录！");
} else {
ExtMessageBoxconfirm("提示信息" "确定要删除吗？" function(btn)
{
if (btn == "yes")
{
ExtAjaxrequest(
{
url:"delphp"
method:"POST"
params:{id : selectedRecorddataid}
success:function(request options)
{
var jsonRequest = ExtutilJSONdecode(requestresponseText);

if (jsonRequest == true)
{
ExtMsgalert("提示信息" "删除成功");
_gridgetStore()remove(selectedRecord);
dsreload();
} else {
ExtMsgalert("提示信息" "<font color=red>删除失败</font>");
}
}
failure : function()
{
ExtMessageBoxshow
({
title : "提示消息"
msg : "删除时发生错误"
});
}
});
}
})
}
}

function chkSelects()
{
var selects = _gridgetSelectionModel()getSelections();
alert("选中的总数为"+selectslength);

}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search(){
//fpanelGridPanel()reset();init();

loginsgetForm()submit({ //提交表单事件

//clientValidation: true
method:"POST" //提交方式(POSTT和GET)
url:"searchphp" //表单提交URL地址
waitMsg:"请稍等正在搜索" //提交未完成提示框内容
waitTitle:"正在搜索" //提示框标题信息
});
var url = searchphp;
// storeproxy=new ExtdataHttpProxy({url:url});
dsreload();
//_proxy = new ExtdataHttpProxy({url:url});
//dsload({params:{start:limit:_pageSize}});
//_gridrender(test_id);

}
function jump()
{
loginsshow();
}
//////////////////////////////

}
ExtonReady(init);
</script>
</head>
<body>
<p style="height:px;"></p>
<div id="test_id"></div>
<div id="search"></div>
</body>
</html>

Indexphp文件

复制代码代码如下:
<?php
header("Content:text/html;charset=utf");
$link = mysql_connect("localhost""root""")or die(errormysql_error());
mysql_select_db("stu"$link);
mysql_query(set names utf);
$sql = "select count(*) num from men";
$num = mysql_query($sql);
$count = mysql_fetch_array($num);
$start = $_POST[start];
$limit = $_POST[limit];
$sql = "SELECT * FROM men limit {$start}{$limit}";
/*
if (!$_POST)
{
$sql = "SELECT * FROM member";
} else {
$sql = "select * from member limit {$start}{$limit}";
}
*/
$data = array();
$result = mysql_query($sql);
while(!!$info = mysql_fetch_array($resultMYSQL_ASSOC))
{
$data[] = $info;
}
//$j = json_encode($data);
$j = "{totalProperty:root:"json_encode($data)"}";
echo $j;
?>

Addphp文件如下

复制代码代码如下:
<?php
header("Content:text/html;charset=utf");
$link = mysql_connect("localhost""root""")or die(errormysql_error());
mysql_select_db("stu"$link);
mysql_query(set names utf);
$name = $_POST[username];
$pwd = $_POST[password];
$time = $_POST[regTime];
$email = $_POST[email];
/*
$name = aaaa;
$pwd = aaaa;
$time = ;
$email = aaaa;*/
$sql = "INSERT INTO men (usernamepasswordregTimeemail) VALUES ({$name}{$pwd}{$time}{$email})";
//mysql_query($sql)
if (mysql_query($sql))
{
echo ok;
}
?>

Delphp文件如下

数据库文件mensql
数据库名叫stu
表名为men
可以把下面的复制到一个文本文档里然后新建stu数据库导入就可以

复制代码代码如下:
phpMyAdmin SQL Dump
version

主机: localhost
生成日期: 年月日 :
服务器版本:
PHP 版本:
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

数据库: `stu`

表的结构 `men`

CREATE TABLE `men` (
`id` int() unsigned NOT NULL auto_increment
`name` varchar() collate utf_unicode_ci NOT NULL
`pass` varchar() collate utf_unicode_ci NOT NULL
`sex` varchar() collate utf_unicode_ci NOT NULL
`email` varchar() collate utf_unicode_ci NOT NULL
PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf COLLATE=utf_unicode_ci AUTO_INCREMENT= ;

导出表中的数据 `men`

INSERT INTO `men` (`id` `name` `pass` `sex` `email`) VALUES
( 赵四 female @qqcom)
( 测试修改 male test@qqcom)
( 赵勇 male sfsf@qqcom)
( 赵勇 male sfsf@qqcom)
( 赵勇 male sfsf@qqcom)
( asdfsf asfsfsf male safsf)
( male )
( female )
( female )
( safdsdf sdf female sdf)
( sdfsdf sdfsdf male sdf)
( test test male test@qqcom)
( saf asdfs male asdf)
( dfgdfg dfgdfg male dfgdfg)
( ertert erter male tertert)
( asdf sdf male sdf);