首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

解析Extjs与php数据交互(增删查改)

Posted in PHP onJune 25, 2013 
<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', '646588973@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');

解析Extjs与php数据交互(增删查改)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
一个从别的网站抓取信息的例子(域名查询)
Oct 09 PHP
phpmyadmin的#1251问题
Nov 25 PHP
获得Google PR值的PHP代码
Jan 28 PHP
php Ajax乱码
Apr 09 PHP
php 引用(&amp;)详解
Nov 20 PHP
php后台多用户权限组思路与实现程序代码分享
Feb 13 PHP
通过PHP的内置函数，通过DES算法对数据加密和解密
Jun 21 PHP
php实现QQ空间获取当前用户的用户名并生成图片
Jul 25 PHP
php 无限分类 树形数据格式化代码
Oct 11 PHP
PHP运行模式汇总
Nov 06 PHP
PHP异常类及异常处理操作实例详解
Dec 19 PHP
浅谈PHP封装CURL
Mar 06 PHP
深入extjs与php参数交互的详解
Jun 25 #PHP
解析centos中Apache、php、mysql 默认安装路径
Jun 25 #PHP
关于js与php互相传值的介绍
Jun 25 #PHP
探讨:如何使用PhpDocumentor生成文档
Jun 25 #PHP
关于PHPDocument 代码注释规范的总结
Jun 25 #PHP
解析php中获取系统信息的方法
Jun 25 #PHP
解析PHP对现有搜索引擎的调用
Jun 25 #PHP
lnmp(1) 伪静态(1) 日志格式分析(1)  AD域(1) lamp(1) Centos(8) Rewrite(4) Windows server 2012(17) 组策略(1) destoon(1)
You might like
php GUID生成函数和类
2014/03/10 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
初始Nodejs
2014/11/08 NodeJs
Node.js 回调函数实例详解
2017/07/06 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[03:44]2014DOTA2国际邀请赛 71专访：DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python关键字and和or用法实例
2015/05/28 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python画双y轴图像的示例代码
2019/07/07 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python通过链接抓取网站详解
2019/11/20 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python 函数中的参数类型
2020/02/11 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
数控技术专科生自我评价
2014/01/08 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
无工作证明怎么写
2015/06/15 职场文书
离职信范本
2015/06/23 职场文书
学生病假条范文
2015/08/17 职场文书
2015元旦感言
2015/12/09 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang