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

php中文网

发布时间：2016-07-21 15:03:27

1273人浏览过

来源于php中文网

原创

复制代码代码如下:

html>

//搜索暂时没做，数据是出来了，但是却没法显示

<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 "红男<img src='./images/male.jpg' / alt="解析Extjs与php数据交互(增删查改)_PHP教程" >"; } else { return "绿女<img src='./images/female.png' / alt="解析Extjs与php数据交互(增删查改)_PHP教程" >"; } } function init() { //1、创建url访问类。 var url = 'index.<a style="max-width:90%" title= "php" href="https://www.php.cn/zt/15714.html" target="_blank">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("提示","数据修改失败"); _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("提示信息", "删除失败"); } }, 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>

如何在 PHP 中正确下载并保存 Blob 图像（如 QR 码）

Laravel 9 中 Eloquent 关联模型类路径错误的解决方案

如何在 JavaScript 中安全嵌入 PHP 变量

如何在 Moodle 中正确安装自定义静态页面插件

PHP 中 WordPress 多语言导航菜单的比较运算符行为不一致问题解析