Extjs与php数据交互（增删查改）

最新推荐文章于 2021-04-02 05:30:41 发布
最新推荐文章于 2021-04-02 05:30:41 发布
阅读量7.7k 收藏 4
点赞数
文章标签： extjs php function mysql email url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Iamduoluo/article/details/7273202
版权
PHP 同时被 3 个专栏收录
114 篇文章 0 订阅
订阅专栏
JavaScript
56 篇文章 0 订阅
订阅专栏
ExtJS
27 篇文章 0 订阅
订阅专栏 

<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([
		new Ext.grid.RowNumberer(),
		new Ext.grid.CheckboxSelectionModel(),			                                	
		{header:"ID",dataIndex:"id",width:50,sortable:true,menuDisabled:true},
		{header:"用户名",dataIndex:"name",width:80,sortable:true},
		{header:"密码",dataIndex:"pass",width:175,sortable:true},
		{header:"性别",dataIndex:"sex",width:145,sortable:true,renderer:renderSex},
		{header:"电子邮箱",dataIndex:"email",width:150,sortable:true}
	]);


/搜索
	var logins = new Ext.form.FormPanel({
		 id:'myform',//分配表单id
	   title: '按用户名搜索',
	   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:[fpanel],  
			buttons:[
			           {text:"保存",	handler :function()
			        	   {       
							//在保存的时候，因为Id值为空，所以不能转换到后台，后台报类型转换异常，可以将Id设值为0，      
							//在后台处理的时候，对于值为0的Id不获取       
			        	   fpanel.findByType("hidden")[0].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 : [fpanel],   
				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文件
<?php
header("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文件如下：
<?php
header("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文件如下：
<?php
header("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.5

SET 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=InnoDB  DEFAULT 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');


饭fan有引力
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于extjs的PHP开源实例源码（EfsFrame）
07-29
开发环境： 应用服务器：IIS + PHP Version 5.2.11 数据库：MySQL Version 5.5.3 相关说明： a) 完整的事务、事件管理、用户、单位、角色、权限管理设计，能快速帮助企业在不同的项目中快速完成用户、单位、角色、权限的分配，迅速投入到项目本身的业务系统开发中。 b) 完整的字典管理功能，能方便的对业务系统的全部字典文件进行维护。 c) 标准通用分页查询存储过程设计，为业务系统开发过程中的分页查询提升效率。 d) 灵活稳定的编码分配设计，只需要通过配置即可快速实现可满足各种要求的唯一编码。 e) 健全的汉字拼音管理，收录了常用的3万多汉字的全拼与简拼，能迅速完成对汉字的全拼与简拼的翻译处理。
php的ext在,使用php-js-ext在PHP内解析javascript脚本_PHP教程
weixin_26833939的博客
03-10 263
当你在因个人兴趣爱好而开发PHP程序时，面对可以达到你的目的却长达千行以上的js脚本，你有精力去用php重写它么？想用PHP模拟用户行为么？但却遇到js泛滥的站点......一个不为人所知的php扩展项目可以满足这些需求，这个扩展的目的就是在php内解释javascript。项目主页 http://aurore.net/projects/php-js/php-js-ext是mozilla java...
extjs php,PHP开发EXT应用框架 - PHP-EXT
weixin_42558093的博客
03-10 151
现在从事PHP网站开发的人员并不在少数,使用ExtJs的人更加不在少数,但很多PHP程序员并不熟悉Javascript,但又非常喜欢使用ExtJs.以前他们只能看着JAVA或者.NET的开发者可以使用服务器端的语言来写ExtJs,现在PHP中也有了类似的框PHP-EXT .下面我们来看一下简单DataGrid的例子:要实现上面的效果,不用写一句js代码....
php extjs 架构,ExtDash——基于ExtJS 5的MVC后台开发框架
weixin_39539733的博客
03-16 113
从2012年接触ExtJS开发以来，一直觉得，ExtJS功能强大令人叹为观止。然而，使用ExtJS开发一款应用并不是一件容易的事，虽然它本身已经是一款高度封装的框架，但完全面向对象的架构、大量的组件、配置项、方法和事件的添加，无异于新创建了一门语言。我一直在思考加速ExtJS开发速度的方法，经过一些实践，我意识到ExtJS开发的难度不在于组件的使用，而在于架构的搭建，于是，我编写了这样一个加速后台...
extjs怎么跟PHP项目结合,如何使用ExtJs整合Echarts（详细教程）
weixin_34377037的博客
04-02 166
本篇文章主要介绍了ExtJs整合Echarts的示例代码，现在分享给大家，也给大家做个参考。由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。ExtJs整合Echarts从Echarts官网下载js文件通过import引用 新建一个页面，通过竖直放置的两个p排版，上方预留给Echarts，下方预留给table标签initPanel : function() {if...
解析Extjs与php数据交互(增删查改)
10-27
本篇文章是对Extjs与php数据交互(增删查改)进行了详细的分析介绍，需要的朋友参考下
extjs mvvm增删查改模糊查询
03-09
extjs mvvm增删查改模糊查询,10分钟学会前端mvvm架构，有详细的注释，直接可以使用。
深入extjs与php参数交互的详解
10-27
本篇文章是对extjs与php的参数交互进行了详细的分析介绍，需要的朋友参考下
extjs3连接mysql数据库实现增删查改功能
01-12
extjs3连接mysql数据库实现增删查改功能，下载之后导入就能直接运行，extjs3连接mysql数据库实现增删查改功能
php extjs 实例,Extjs单独定义各组件的实例代码_extjs
weixin_34337134的博客
03-26 197
网上看到的一个事例，其中包含了组件的定义拷贝下来供大家参考：Ext.onReady(function(){var dtCategory=[['all','所有种类'],['1','Beverages'],['2','Condiments'],['3','Confections'],['4','Dairy Products'],['5','Grains/Cereals'],['6','Meat/Po...
支持php5.3.3的php-js-ext 0.1.2扩展
02-18
支持php5.3.3的php-js-ext 0.1.2扩展
php与extjs
07-11
php与extjs的系统
Extjs4.2+php5.4 图书管理系统
11-13
Extjs4.2+php5.4+mysql5.5 有数据库，一般不会轻易上传，2015年本人亲自开发，技术还是新的
php+Extjs+mysql实例
11-30
php mysql Extjs 合同信息管理，包括添加、修改、删除、查询
php+ExtJS 开发实战
07-10
ExtJS php结合在一起,高效开发后台服务
php加extjs开发,Javascript-EXTJS组件开发完整代码
weixin_33480380的博客
03-13 80
目标：EXTJS组件开发，从component基础实现一个TAB控件。使用EXTJS版本为5.0。测试通过。这个例子还很初级，仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。EXT JS TEST.tabsp{width:500px;height:450px;margin-top: 0px; margin-left: 0px;}.tabsp ul{width: 500px;height...
EXTJS+PHP房屋中介管理系统
10-07
用Extjs框架+PHP+MYsql实现的小性应用系统
在Extjs中使用ajax传参到php中
09-06
在extjs中，需要跟php传递参数时，要用到模板去传递
jsext-开源
04-25
JSEXT是用于服务器脚本，Web服务器和Web客户端JavaScript框架。 将C库与JavaScript代码无缝集成。 基于此，JSEXT提供了对fastcgi，MySQL，SQLite，FTP，SMTP，HTTP等的支持。
ExtJS proxy加载数据
最新发布
10-18
ExtJS中的proxy是用来加载数据的，它可以将数据从服务器端加载到客户端。在ExtJS中，proxy有四种类型：Ajax、Direct、JsonP和Rest。其中，Ajax是最常用的一种类型，它可以通过异步请求从服务器端获取数据。下面是一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值