解析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（[
  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"）;