解析Extjs与php数据交互(增删查改)
前端之家收集整理的这篇文章主要介绍了
解析Extjs与php数据交互(增删查改)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<div class="codetitle"><a style="CURSOR: pointer" data="93554" class="copybut" id="copybut93554" onclick="doCopy('code93554')"> 代码如下:
<div class="codebody" id="code93554">
//
搜索暂时没做，数据是出来了，但是却没法
显示<link rel="stylesheet" type="text/css" href="./js/resources/css/ext-all.css"/>
<script type="text/javascript" src="./js/jquery.js">
<script type="text/javascript" src="./js/ext-base.js">
<script type="text/javascript" src="./js/ext-all.js">
<script type="text/javascript" src="./js/ext-lang-zh_CN-min.js">
<script type="text/javascript">
Ext.QuickTips.init(); //初始化
快速提示对象
function test() {
Ext.Msg.alert('title','test-yii-ext');
}
function renderSex(value) {
if (value == 'male') {
return "
红男
";
} else {
return "
绿女
";
}
}
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,
{header:"性别",dataIndex:"sex",width:145,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: '隐藏',
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,blankText:"性别不允许为空！",items:[{BoxLabel:'男',name:'sex',inputValue:'male'},{BoxLabel:'女',inputValue:'female'}]},fieldLabel:"密码",name:"pass",//是否允许为空
blankText:"密码不允许为空！",anchor : "-20"},
{xtype:"textarea",fieldLabel:"电子邮箱",name:"email",//是否允许为空
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",// 模态窗口，当打开当前窗口时，后面的内容被遮挡
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",
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,//提交方式(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);
<p style="height:10px;">
<div id="test_id"> 
