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

<BR><BR>//搜索暂时没做，数据是出来了，但是却没法显示<BR><link rel="stylesheet" type="text/css" href="./js/resources/css/ext-all.css"/><BR><script type="text/javascript" src="./js/jquery.js"></script><BR><script type="text/javascript" src="./js/ext-base.js"></script><BR><script type="text/javascript" src="./js/ext-all.js"></script><BR><script type="text/javascript" src="./js/ext-lang-zh_CN-min.js"></script><BR><script type="text/javascript"><BR>Ext.QuickTips.init(); //初始化快速提示对象<BR>function test() {<BR> Ext.Msg.alert('title','test-yii-ext');<BR>}<BR>function renderSex(value) {<BR>    if (value == 'male') {<BR>        return "<span style='color:red;font-weight:bold'>红男</span>";<BR>    } else {<BR>        return "<span style='color:green;font-weight:bold'>绿女</span>";<BR>    }<BR>}<BR>function init() <BR>{<br><br> //1、创建url访问类。<BR> var url = 'index.php';<BR> var _proxy = new Ext.data.HttpProxy({url:url});<BR> //2、数据问题参数<BR> var _jsonProperty = "totalProperty";<BR> //数据根目录参数<BR> var _jsonRoot = "root";<BR> //Record显示列表对应关系<BR> var _record = [{name:'id'},<BR>             {name:'name'},<BR>             {name:'pass'},<BR>             {name:'sex'},<BR>             {name:'email'}];<BR> //创建JSONReader对象，需要设置记录总数，根目录名称，记录映射<BR> var _reader = new Ext.data.JsonReader({totelPropetty:_jsonProperty,root:_jsonRoot},_record);<BR> /**<BR>  * 封装一个客户端的Record对象缓存，为GridPanel提供数据入口<BR>  * 需要两个必须的参数<BR>  * 1、提供数据的地址：Proxy  代理类<BR>  * 2、数据的读取方式：Reader 类，这里通过JsonReader读取<BR>  */<BR> var _store = new Ext.data.Store({<BR>  proxy:_proxy,<BR>  reader:_reader<BR> });<BR> /**<BR> ColumnModel<BR> * 数据在页面上显示标题信息，<BR> * 顺序和Record对应<BR> * sortable 是否排序<BR> * dataIndex 进行对应的列，对应Record中的NAME<BR> * <BR> * handler方法中 第一个参数表示父类的对象，本例中为GridPanel对象。<BR> * 第二个参数表示第几行。<BR> * 第三个参数表示第几列。<BR> */<BR> var _cm = new Ext.grid.ColumnModel([<BR>  new Ext.grid.RowNumberer(),<BR>  new Ext.grid.CheckboxSelectionModel(),                                    <BR>  {header:"ID",dataIndex:"id",width:50,sortable:true,menuDisabled:true},<BR>  {header:"用户名",dataIndex:"name",width:80,sortable:true},<BR>  {header:"密码",dataIndex:"pass",width:175,sortable:true},<BR>  {header:"性别",dataIndex:"sex",width:145,sortable:true,renderer:renderSex},<BR>  {header:"电子邮箱",dataIndex:"email",width:150,sortable:true}<BR> ]);<BR>/////////////////////////搜索<BR> var logins = new Ext.form.FormPanel({<BR>   id:'myform',//分配表单id<BR>    title: '按用户名搜索',<BR>    width: 400,<BR>    defaultType: 'textfield',<BR>    frame: true,<BR>   // method: 'POST',<BR>    collapsible: true,//可折叠<BR>    bodyPadding: 5,<br><br>    layout: 'column',//列布局<br><br>    margin: '0 0 10 0',<BR>    items: [{<BR>        fieldLabel: '姓名',<BR>        labelWidth: 40,<BR>        id: 'name'<BR>    }],<BR>    buttons: [{<BR>       // xtype: 'button',<BR>        text: '搜索',<BR>        margin: '0 0 0 5',<BR>        handler: search<BR>    },{<BR>        // xtype: 'button',<BR>        text: '隐藏',<BR>        margin: '0 0 0 5',<BR>        handler: hide<BR>    }],<br><br>    renderTo: "search"<BR> })<BR> logins.hide();<BR> function hide()<BR> {<BR>  logins.hide();<BR>  }<BR>///////////////////////////////////////////////////////<br><br> ///////////////////////////////////////////////////////////////////////////////////////////<BR> //获取数据<BR> var ds = new Ext.data.Store({<br><br>  //proxy告诉我们从哪获得数据,Ext.data.MemoryProxy专门解析js变量<BR>  //proxy:new Ext.data.MemoryProxy(data),<BR>  //通过http获取数据<BR>  proxy:new Ext.data.HttpProxy({<BR>   url:url}),<br><br>  //获取json数据<BR>  reader:new Ext.data.JsonReader({<BR>   totalProperty:'totalProperty',<BR>   root:'root'<BR>  },Ext.data.Record.create([<BR>     {name:'id'},<BR>     {name:'name'},<BR>     {name:'pass'},<BR>     {name:'sex'},<BR>     {name:'email'}<BR>  ]))<BR> });<BR>//////////////////////////////////////////////////////////////////////////////////////////////////////////////////<BR> //自动分页<BR> var _pageSize = 16;<BR> var _toolbar = new Ext.PagingToolbar({<BR>  store:ds,<BR>  pageSize:_pageSize,<BR>  displayInfo:true,<BR>  displayMsg:'显示第{0}条到第{1}条记录，一共{2}条',<BR>  emptyMsg:'暂无数据'<BR> });<br><br> //顶部工具栏按钮<BR> var t_toolbar = [<BR>  {id:"addData",text:"用户添加",handler:addUser},"-",<BR>       {id:"updateData",text:"用户修改",listeners:{"click":updateUser}},"-",<BR>       {id:"deleteData",text:"删除选中用户",handler:removeUser},"-",<BR>       {id:"test",text:"测试选中",handler:chkSelects},"-",<BR>       {id:"search",text:"搜索",handler:jum<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码)网8</i><strong>搞代gaodaima码</strong>p}<BR>    ];<BR> /**<BR>  * GridPanel对象<BR>  * 数据列表页面<BR>  * 必须设置 Store 数据访问对象和标题栏显示信息<BR>  * 即 Store和ColumnModel对象<BR>  */<BR> var _grid = new Ext.grid.GridPanel({<BR>  headerAsText: false, // 如果有标题栏, 隐藏标题栏<BR>  collapsible: true,//可折叠<BR>  height:500,<BR>  width:1100,<BR>  frame:true,//圆角边框<BR>  store:ds,<BR>  title:'测试yii整合Ext',<BR>  cm:_cm,<BR>  bbar : _toolbar,<BR>  tbar : t_toolbar<BR> });<BR> ds.load({params:{start:0,limit:_pageSize}});<BR> _grid.render('test_id');<br><br> //_grid.render();<BR> /* 用户信息录入框,验证  */<BR> var fpanel;<BR> function f(){<BR> fpanel = new Ext.form.FormPanel<BR> ({    <BR>  frame : true,//边框圆角并且有背景色    <BR>  labelAlign : 'right',    <BR>  waitMsgTarget : true,    <BR>  autoScroll : true,    <BR>  buttonAlign : 'center',    <BR>  items : [<BR>           {xtype:"hidden",name:"id"}, <BR>     {xtype:"textfield",fieldLabel:"用户名",name:"name",anchor : "-20",allowBlank:false,//是否允许为空<BR>               blankText:"用户名不允许为空！",labelWidth : 20},<BR>           {xtype:"radiogroup",fieldLabel:"性别",columns:2,allowBlank:false,blankText:"性别不允许为空！",items:[{boxLabel:'男',name:'sex',inputValue:'male'},{boxLabel:'女',name:'sex',inputValue:'female'}]},<BR>     {xtype:"textfield",fieldLabel:"密码",name:"pass",allowBlank:false,//是否允许为空<BR>                       blankText:"密码不允许为空！",anchor : "-20"},<BR>     {xtype:"textarea",fieldLabel:"电子邮箱",name:"email",allowBlank:false,//是否允许为空<BR>                           blankText:"邮箱不允许为空！",anchor : "-20"}<BR>    ]<BR> });<BR>}<br><br> var win;<BR> /* 增加用户  */<BR> function addUser() <BR> {<BR>  f();<br><br>  win = new Ext.Window<BR>  ({     <BR>   title:"新增用户",<BR>   id:"win",<BR>   //animEl:"fly",<BR>   //layout:"fit",<BR>   width:350,     <BR>   height:250,     <BR>   closeAction : "close",    <BR>   plain : true,    <BR>   modal : true,// 模态窗口，当打开当前窗口时，后面的内容被遮挡  <BR>   bodyStyle:"padding:3px 0 0 3px",     <BR>   layout:"form",     <BR>   labelWidth:55,     <BR>   items:[fpanel],  <BR>   buttons:[<BR>              {text:"保存", handler :function()<BR>               {       <BR>       //在保存的时候，因为Id值为空，所以不能转换到后台，后台报类型转换异常，可以将Id设值为0，      <BR>       //在后台处理的时候，对于值为0的Id不获取       <BR>               fpanel.findByType("hidden")[0].setValue(0);       <BR>               fpanel.getForm().submit({<BR>                      url : "add.php",<BR>                      method : "POST",<BR>                      waitMsg : "保存数据...",<br><br>                      success : function(form, action) {  <BR>                          // 业务成功  <BR>                       Ext.MessageBox.alert('提示','添加成功!');<BR>                          win.close();<BR>                          ds.load({params:{ start:0,limit:_pageSize} });<BR>                      },  <BR>                      failure : function(form, action) {  <BR>                          // 业务失败<br><br>                       <BR>                      obj = Ext.util.JSON.decode(action.response.responseText);<BR>                      Ext.MessageBox.alert('提示', obj.errors.reason);<BR>                      win.close();<br><br>                      ds.load({params:{ start:0,limit:_pageSize} });<BR>                     }  <BR>                 }); <BR>               }     <BR>               },<BR>               { <BR>                text:"重置",handler:function()<BR>                {       <BR>                 fpanel.getForm().reset();   <BR>       }     <BR>               }<BR>            ]    <BR>    })<BR>  win.show();<BR>  // 因为重复使用window，有可能在修改后fpanel中还存在数据，所以要先重置<br><br>  fpanel.getForm().reset();<BR> }<br><br> <BR> /* 修改用户信息  */<BR> function updateUser() <BR> {<BR>  var win_2;<BR>  var a = 3;<BR>  f();<BR>  var selectedRecord = _grid.getSelectionModel().getSelected();    <BR>  // 获得多个数据 <br><br>  if (selectedRecord == undefined || selectedRecord == null)<BR>  {   <BR>   Ext.MessageBox.alert("提示", "请先选择一条记录！");  <BR>  } else {   <BR>   win_2 = new Ext.Window<BR>   ({    <BR>    title : "修改用户",    <BR>    width : 350,    <BR>    height : 250,    <BR>    closeAction : "hide",    <BR>    plain : true,    <BR>    modal : true,// 模态窗口，当打开当前窗口时，后面的内容被遮挡    <BR>    bodyStyle : "padding:3px 0 0 3px",    <BR>    //layout : "form",<BR>    layout:"fit",    <BR>    labelWidth : 55,    <BR>    items : [fpanel],   <BR>    buttons : [<BR>               {text:"修改", handler:function() <BR>        {fpanel.getForm().submit<BR>                  ({        <BR>          url:"edit.php",           <BR>          method:"POST",           <BR>          waitMsg:"数据修改中...",           <BR>          success:function(form,action)<BR>          {            <BR>           win_2.hide();            <BR>           Ext.MessageBox.alert("提示","数据修改成功");         <BR>           _ds.reload();           <BR>          },<BR>          failure : function(form, action) {  <BR>           win_2.hide();<BR>           Ext.MessageBox.alert("提示","<font color='red'>数据修改失败</font>");<BR>                       _ds.load();<BR>                      }    <BR>                  });       <BR>        }      <BR>               },<BR>               {<BR>                text : "重置",handler:function() <BR>                {<BR>                 fpanel.getForm().reset();<BR>                }      <BR>               },<BR>               {<BR>                text: '关闭',handler: function()<BR>                {<BR>                        win_2.close();<BR>                 }<BR>               }<BR>              ]   <BR>      });<BR>  }<BR>  win_2.show();<BR>   // 将选中的数据load到window中显示   <BR>  //alert(win_2);<BR>  win_2.getComponent(0).getForm().loadRecord(selectedRecord);     <br><br> }<br><br> /* 删除用户  */<BR> function removeUser(btn) <BR> {  <BR>  var selectedRecord = _grid.getSelectionModel().getSelected();  <BR>  if (selectedRecord == undefined || selectedRecord == null) <BR>  {   <BR>   Ext.MessageBox.alert("提示", "请先选择一条记录！");  <BR>  } else {  <BR>   Ext.MessageBox.confirm("提示信息", "确定要删除吗？", function(btn) <BR>   {    <BR>    if (btn == "yes") <BR>    {     <BR>     Ext.Ajax.request(<BR>     {        <BR>      url:"del.php",        <BR>      method:"POST",        <BR>      params:{id : selectedRecord.data.id},<BR>      success:function(request, options)<BR>      {         <BR>       var jsonRequest = Ext.util.JSON.decode(request.responseText);<br><br>       if (jsonRequest == true) <BR>       {<BR>        Ext.Msg.alert("提示信息", "删除成功");<BR>        _grid.getStore().remove(selectedRecord);          <BR>        ds.reload();         <BR>       } else {          <BR>        Ext.Msg.alert("提示信息", "<font color='red'>删除失败</font>");         <BR>       }        <BR>      },        <BR>      failure : function() <BR>      {         <BR>       Ext.MessageBox.show<BR>       ({            <BR>        title : "提示消息",            <BR>        msg : "删除时发生错误"           <BR>       });        <BR>      }       <BR>     });    <BR>    }   <BR>   })  <BR>  }<BR> }<br><br> <br><br> function chkSelects()<BR> {  <BR>  var selects = _grid.getSelectionModel().getSelections();  <BR>  alert("选中的总数为："+selects.length);  <br><br> }<BR>////////////////////////////////////////////////////////////////////////////////////////////////////////////////<BR> function search(){<BR>  //fpanel.GridPanel().reset();init();<br><br>  logins.getForm().submit({ //提交表单事件<br><br>    //clientValidation: true,<BR>    method:"POST", //提交方式(POSTT和GET)<BR>    url:"search.php", //表单提交URL地址<BR>    waitMsg:"请稍等,正在搜索...", //提交未完成提示框内容<BR>    waitTitle:"正在搜索", //提示框标题信息<BR>   });<BR>  var url = 'search.php';<BR>  // store.proxy=new Ext.data.HttpProxy({url:url});  <BR>  ds.reload();<BR>   //_proxy = new Ext.data.HttpProxy({url:url});  <BR>   //ds.load({params:{start:0,limit:_pageSize}});<BR>  //_grid.render('test_id');<br><br> }<BR> function jump()<BR> {<BR>  logins.show();<BR> }<BR> //////////////////////////////<br><br>}<BR>Ext.onReady(init);<BR></script><BR><BR><body><BR><BR><div id="test_id">