Extjs与php数据交互（增删查改）
<html><head>//搜索暂时没做，数据是出来了，但是却没法显示<link rel="stylesheet" type="text/css" href="./js/resources/css/ext-all.css"/><script type="text/javascript" src="./js/jquery.js"></script><script type="text/javascript" src="./js/ext-base.js"></script><script type="text/javascript" src="./js/ext-all.js"></script><script type="text/javascript" src="./js/ext-lang-zh_CN-min.js"></script><script type="text/javascript">Ext.QuickTips.init(); //初始化快速提示对象function test() {Ext.Msg.alert('title','test-yii-ext');}function renderSex(value) {if (value == 'male') {return "<span style='color:red;font-weight:bold;'>红男</span><img src='./images/male.jpg' />";} else {return "<span style='color:green;font-weight:bold;'>绿女</span><img src='./images/female.png' />";}}function init() {//1、创建url访问类。var url = 'index.php';var _proxy = new Ext.data.HttpProxy({url:url});//2、数据问题参数var _jsonProperty = "totalProperty";//数据根目录参数var _jsonRoot = "root";//Record显示列表对应关系var _record = [{name:'id'},{name:'name'},{name:'pass'},{name:'sex'},{name:'email'}];//创建JSONReader对象，需要设置记录总数，根目录名称，记录映射var _reader = new Ext.data.JsonReader({totelPropetty:_jsonProperty,root:_jsonRoot},_record);/*** 封装一个客户端的Record对象缓存，为GridPanel提供数据入口* 需要两个必须的参数* 1、提供数据的地址：Proxy代理类* 2、数据的读取方式：Reader 类，这里通过JsonReader读取*/var _store = new Ext.data.Store({proxy:_proxy,reader:_reader});/**ColumnModel* 数据在页面上显示标题信息，* 顺序和Record对应* sortable 是否排序* dataIndex 进行对应的列，对应Record中的NAME* * handler方法中 第一个参数表示父类的对象，本例中为GridPanel对象。* 第二个参数表示第几行。* 第三个参数表示第几列。*/var _cm = new Ext.grid.ColumnModel();/////////////////////////搜索var logins = new Ext.form.FormPanel({id:'myform',//分配表单idtitle: '按用户名搜索',width: 400,defaultType: 'textfield',frame: true,// method: 'POST',collapsible: true,//可折叠bodyPadding: 5,layout: 'column',//列布局margin: '0 0 10 0',items: [{fieldLabel: '姓名',labelWidth: 40,id: 'name'}],buttons: [{// xtype: 'button',text: '搜索',margin: '0 0 0 5',handler: search},{// xtype: 'button',text: '隐藏',margin: '0 0 0 5',handler: hide}],renderTo: "search"})logins.hide();function hide(){logins.hide();}////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////获取数据var ds = new Ext.data.Store({//proxy告诉我们从哪获得数据,Ext.data.MemoryProxy专门解析js变量//proxy:new Ext.data.MemoryProxy(data),//通过http获取数据proxy:new Ext.data.HttpProxy({url:url}),//获取json数据reader:new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},Ext.data.Record.create([{name:'id'},{name:'name'},{name:'pass'},{name:'sex'},{name:'email'}]))});////////////////////////////////////////////////////////////////////////////////////////////////////////////////////自动分页var _pageSize = 16;var _toolbar = new Ext.PagingToolbar({store:ds,pageSize:_pageSize,displayInfo:true,displayMsg:'显示第{0}条到第{1}条记录，一共{2}条',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 Ext.grid.GridPanel({headerAsText: false, // 如果有标题栏, 隐藏标题栏collapsible: true,//可折叠height:500,width:1100,frame:true,//圆角边框store:ds,title:'测试yii整合Ext',cm:_cm,bbar : _toolbar,tbar : t_toolbar});ds.load({params:{start:0,limit:_pageSize}});_grid.render('test_id');//_grid.render();/* 用户信息录入框,验证*/var fpanel;function f(){fpanel = new Ext.form.FormPanel({ frame : true,//边框圆角并且有背景色 labelAlign : 'right', waitMsgTarget : true, autoScroll : true, buttonAlign : 'center', items : [{xtype:"hidden",name:"id"}, {xtype:"textfield",fieldLabel:"用户名",name:"name",anchor : "-20",allowBlank:false,//是否允许为空blankText:"用户名不允许为空！",labelWidth : 20},{xtype:"radiogroup",fieldLabel:"性别",columns:2,allowBlank:false,blankText:"性别不允许为空！",items:[{boxLabel:'男',name:'sex',inputValue:'male'},{boxLabel:'女',name:'sex',inputValue:'female'}]},{xtype:"textfield",fieldLabel:"密码",name:"pass",allowBlank:false,//是否允许为空blankText:"密码不允许为空！",anchor : "-20"},{xtype:"textarea",fieldLabel:"电子邮箱",name:"email",allowBlank:false,//是否允许为空blankText:"邮箱不允许为空！",anchor : "-20"}]});}var win;/* 增加用户*/function addUser() {f();win = new Ext.Window({ title:"新增用户",id:"win",//animEl:"fly",//layout:"fit",width:350, height:250, closeAction : "close", plain : true, modal : true,// 模态窗口，当打开当前窗口时，后面的内容被遮挡bodyStyle:"padding:3px 0 0 3px", layout:"form", labelWidth:55, items:,buttons:[{text:"保存",handler :function(){ //在保存的时候，因为Id值为空，所以不能转换到后台，后台报类型转换异常，可以将Id设值为0， //在后台处理的时候，对于值为0的Id不获取 fpanel.findByType("hidden").setValue(0); fpanel.getForm().submit({url : "add.php",method : "POST",waitMsg : "保存数据...",success : function(form, action) {// 业务成功Ext.MessageBox.alert('提示','添加成功!');win.close();ds.load({params:{ start:0,limit:_pageSize} });},failure : function(form, action) {// 业务失败obj = Ext.util.JSON.decode(action.response.responseText);Ext.MessageBox.alert('提示', obj.errors.reason);win.close();ds.load({params:{ start:0,limit:_pageSize} });}}); } },{text:"重置",handler:function(){ fpanel.getForm().reset(); } }] })win.show();// 因为重复使用window，有可能在修改后fpanel中还存在数据，所以要先重置fpanel.getForm().reset();}/* 修改用户信息*/function updateUser() {var win_2;var a = 3;f();var selectedRecord = _grid.getSelectionModel().getSelected(); // 获得多个数据 if (selectedRecord == undefined || selectedRecord == null){ Ext.MessageBox.alert("提示", "请先选择一条记录！");} else { win_2 = new Ext.Window({ title : "修改用户", width : 350, height : 250, closeAction : "hide", plain : true, modal : true,// 模态窗口，当打开当前窗口时，后面的内容被遮挡 bodyStyle : "padding:3px 0 0 3px", //layout : "form",layout:"fit", labelWidth : 55, items : , buttons : [{text:"修改",handler:function() {fpanel.getForm().submit({ url:"edit.php", method:"POST", waitMsg:"数据修改中...", success:function(form,action){ win_2.hide(); Ext.MessageBox.alert("提示","数据修改成功"); _ds.reload(); },failure : function(form, action) {win_2.hide();Ext.MessageBox.alert("提示","<font color='red'>数据修改失败</font>");_ds.load();} }); } },{text : "重置",handler:function() {fpanel.getForm().reset();} },{text: '关闭',handler: function(){win_2.close();}}] });}win_2.show();// 将选中的数据load到window中显示 //alert(win_2);win_2.getComponent(0).getForm().loadRecord(selectedRecord); }/* 删除用户*/function removeUser(btn) {var selectedRecord = _grid.getSelectionModel().getSelected();if (selectedRecord == undefined || selectedRecord == null) { Ext.MessageBox.alert("提示", "请先选择一条记录！");} else {Ext.MessageBox.confirm("提示信息", "确定要删除吗？", function(btn) { if (btn == "yes") { Ext.Ajax.request({ url:"del.php", method:"POST", params:{id : selectedRecord.data.id},success:function(request, options){ var jsonRequest = Ext.util.JSON.decode(request.responseText);if (jsonRequest == true) {Ext.Msg.alert("提示信息", "删除成功");_grid.getStore().remove(selectedRecord); ds.reload(); } else { Ext.Msg.alert("提示信息", "<font color='red'>删除失败</font>"); } }, failure : function() { Ext.MessageBox.show({ title : "提示消息", msg : "删除时发生错误" }); } }); } })}}function chkSelects(){var selects = _grid.getSelectionModel().getSelections();alert("选中的总数为："+selects.length);}////////////////////////////////////////////////////////////////////////////////////////////////////////////////function search(){//fpanel.GridPanel().reset();init();logins.getForm().submit({ //提交表单事件//clientValidation: true,method:"POST", //提交方式(POSTT和GET)url:"search.php", //表单提交URL地址waitMsg:"请稍等,正在搜索...", //提交未完成提示框内容waitTitle:"正在搜索", //提示框标题信息});var url = 'search.php';// store.proxy=new Ext.data.HttpProxy({url:url});ds.reload();//_proxy = new Ext.data.HttpProxy({url:url});//ds.load({params:{start:0,limit:_pageSize}});//_grid.render('test_id');}function jump(){logins.show();}//////////////////////////////}Ext.onReady(init);</script></head><body><p style="height:10px;"></p><div id="test_id"></div><div id="search"></div></body></html>Index.php文件<?phpheader("Content:text/html;charset=utf-8");$link = mysql_connect("localhost","root","123456")or die('error'.mysql_error());mysql_select_db("stu",$link);mysql_query('set names utf8');$sql = "select count(*) num from men";$num = mysql_query($sql);$count = mysql_fetch_array($num);$start = $_POST['start'];$limit = $_POST['limit'];$sql2 = "SELECT * FROM men limit {$start},{$limit}";/*if (!$_POST){$sql2 = "SELECT * FROM member";} else {$sql2 = "select * from member limit {$start},{$limit}";}*/$data = array();$result = mysql_query($sql2);while(!!$info = mysql_fetch_array($result,MYSQL_ASSOC)){$data[] = $info;}//$j = json_encode($data);$j = "{totalProperty:100,root:".json_encode($data)."}";echo $j;?>
Add.php文件如下：<?phpheader("Content:text/html;charset=utf-8");$link = mysql_connect("localhost","root","123456")or die('error'.mysql_error());mysql_select_db("stu",$link);mysql_query('set names utf8');$name = $_POST['username'];$pwd = $_POST['password'];$time = $_POST['regTime'];$email = $_POST['email'];/*$name = 'aaaa';$pwd = 'aaaa';$time = '2011-12-31';$email = 'aaaa';*/$sql = "INSERT INTO men (username,password,regTime,email) VALUES ('{$name}','{$pwd}','{$time}','{$email}')";//mysql_query($sql)if (mysql_query($sql)){echo 'ok';}?>
Del.php文件如下：<?phpheader("Content:text/html;charset=utf-8");$link = mysql_connect("localhost","root","123456")or die('error'.mysql_error());mysql_select_db("stu",$link);mysql_query('set names utf8');$id = $_POST['id'];$sql = "DELETE FROM men WHERE id={$id}";if (mysql_query($sql)){echo 1;} else {echo 0;}?>
数据库文件men.sql
数据库名叫：stu
表名为：men
可以把下面的复制到一个文本文档里，然后新建stu数据库，导入就可以。
-- phpMyAdmin SQL Dump-- version 2.11.2.1-- http://www.phpmyadmin.net---- 主机: localhost-- 生成日期: 2012 年 01 月 11 日 10:02-- 服务器版本: 5.0.45-- PHP 版本: 5.2.5SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";---- 数据库: `stu`---- ------------------------------------------------------------ 表的结构 `men`--CREATE TABLE `men` (`id` int(11) unsigned NOT NULL auto_increment,`name` varchar(50) collate utf8_unicode_ci NOT NULL,`pass` varchar(32) collate utf8_unicode_ci NOT NULL,`sex` varchar(10) collate utf8_unicode_ci NOT NULL,`email` varchar(50) collate utf8_unicode_ci NOT NULL,PRIMARY KEY(`id`)) ENGINE=InnoDBDEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=28 ;---- 导出表中的数据 `men`--INSERT INTO `men` (`id`, `name`, `pass`, `sex`, `email`) VALUES(1, '赵勇', '123456', 'female', '8739936@qq.com'),(2, '测试修改', '123456', 'male', 'test@qq.com'),(8, '赵勇2', '123456', 'male', 'sfsf@qq.com'),(9, '赵勇3', '123456', 'male', 'sfsf@qq.com'),(10, '赵勇5', '123456', 'male', 'sfsf@qq.com'),(11, 'asdfsf', 'asfsfsf', 'male', 'safsf'),(18, '12', '123', 'male', '123'),(19, '123', '123', 'female', '123'),(20, '123123', '123', 'female', '123'),(21, 'safdsdf', 'sdf', 'female', 'sdf'),(22, 'sdfsdf', 'sdfsdf', 'male', 'sdf'),(23, 'test', 'test', 'male', 'test@qq.com'),(24, 'saf', 'asdfs', 'male', 'asdf'),(25, 'dfgdfg', 'dfgdfg', 'male', 'dfgdfg'),(26, 'ertert', 'erter', 'male', 'tertert'),(27, '1asdf', 'sdf', 'male', 'sdf');
页:
[1]