您当前的位置: 首页 > 网站编程 > PHP教程 > 解析Extjs与php数据交互(增删查改)

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

作者:不详 来源:网络 发布时间: 2014-08-19 09:01 点击:
代码如下: 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 scr

解析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');
分享到:
本文"解析Extjs与php数据交互(增删查改)"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4