|
|
<html>
<head>
//搜索暫時(shí)沒做，數(shù)據(jù)是出來了，但是卻沒法顯示
<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(); //初始化快速提示對(duì)象
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、創(chuàng)建url訪問類。
var url = 'index.php';
var _proxy = new Ext.data.HttpProxy({url:url});
//2、數(shù)據(jù)問題參數(shù)
var _jsonProperty = "totalProperty";
//數(shù)據(jù)根目錄參數(shù)
var _jsonRoot = "root";
//Record顯示列表對(duì)應(yīng)關(guān)系
var _record = [{name:'id'},
{name:'name'},
{name:'pass'},
{name:'sex'},
{name:'email'}];
//創(chuàng)建JSONReader對(duì)象，需要設(shè)置記錄總數(shù)，根目錄名稱，記錄映射
var _reader = new Ext.data.JsonReader({totelPropetty:_jsonProperty,root:_jsonRoot},_record);
/**
* 封裝一個(gè)客戶端的Record對(duì)象緩存，為GridPanel提供數(shù)據(jù)入口
* 需要兩個(gè)必須的參數(shù)
* 1、提供數(shù)據(jù)的地址：Proxy 代理類
* 2、數(shù)據(jù)的讀取方式：Reader 類，這里通過JsonReader讀取
*/
var _store = new Ext.data.Store({
proxy:_proxy,
reader:_reader
});
/**
ColumnModel
* 數(shù)據(jù)在頁面上顯示標(biāo)題信息，
* 順序和Record對(duì)應(yīng)
* sortable 是否排序
* dataIndex 進(jìn)行對(duì)應(yīng)的列，對(duì)應(yīng)Record中的NAME
*
* handler方法中 第一個(gè)參數(shù)表示父類的對(duì)象，本例中為GridPanel對(duì)象。
* 第二個(gè)參數(shù)表示第幾行。
* 第三個(gè)參數(shù)表示第幾列。
*/
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();
}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////
//獲取數(shù)據(jù)
var ds = new Ext.data.Store({
//proxy告訴我們從哪獲得數(shù)據(jù),Ext.data.MemoryProxy專門解析js變量
//proxy:new Ext.data.MemoryProxy(data),
//通過http獲取數(shù)據(jù)
proxy:new Ext.data.HttpProxy({
url:url}),
//獲取json數(shù)據(jù)
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root'
},Ext.data.Record.create([
{name:'id'},
{name:'name'},
{name:'pass'},
{name:'sex'},
{name:'email'}
]))
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//自動(dòng)分頁
var _pageSize = 16;
var _toolbar = new Ext.PagingToolbar({
store:ds,
pageSize:_pageSize,
displayInfo:true,
displayMsg:'顯示第{0}條到第{1}條記錄，一共{2}條',
emptyMsg:'暫無數(shù)據(jù)'
});
//頂部工具欄按鈕
var t_toolbar = [
{id:"addData",text:"用戶添加",handler:addUser},"-",
{id:"updateData",text:"用戶修改",listeners:{"click":updateUser}},"-",
{id:"deleteData",text:"刪除選中用戶",handler:removeUser},"-",
{id:"test",text:"測(cè)試選中",handler:chkSelects},"-",
{id:"search",text:"搜索",handler:jump}
];
/**
* GridPanel對(duì)象
* 數(shù)據(jù)列表頁面
* 必須設(shè)置 Store 數(shù)據(jù)訪問對(duì)象和標(biāo)題欄顯示信息
* 即 Store和ColumnModel對(duì)象
*/
var _grid = new Ext.grid.GridPanel({
headerAsText: false, // 如果有標(biāo)題欄, 隱藏標(biāo)題欄
collapsible: true,//可折疊
height:500,
width:1100,
frame:true,//圓角邊框
store:ds,
title:'測(cè)試yii整合Ext',
cm:_cm,
bbar : _toolbar,
tbar : t_toolbar
});
ds.load({params:{start:0,limit:_pageSize}});
_grid.render('test_id');
//_grid.render();
/* 用戶信息錄入框,驗(yàn)證 */
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,// 模態(tài)窗口，當(dāng)打開當(dāng)前窗口時(shí)，后面的內(nèi)容被遮擋
bodyStyle:"padding:3px 0 0 3px",
layout:"form",
labelWidth:55,
items:[fpanel],
buttons:[
{text:"保存", handler :function()
{
//在保存的時(shí)候，因?yàn)镮d值為空，所以不能轉(zhuǎn)換到后臺(tái)，后臺(tái)報(bào)類型轉(zhuǎn)換異常，可以將Id設(shè)值為0，
//在后臺(tái)處理的時(shí)候，對(duì)于值為0的Id不獲取
fpanel.findByType("hidden")[0].setValue(0);
fpanel.getForm().submit({
url : "add.php",
method : "POST",
waitMsg : "保存數(shù)據(jù)...",
success : function(form, action) {
// 業(yè)務(wù)成功
Ext.MessageBox.alert('提示','添加成功!');
win.close();
ds.load({params:{ start:0,limit:_pageSize} });
},
failure : function(form, action) {
// 業(yè)務(wù)失敗
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();
// 因?yàn)橹貜?fù)使用window，有可能在修改后fpanel中還存在數(shù)據(jù)，所以要先重置
fpanel.getForm().reset();
}
/* 修改用戶信息 */
function updateUser()
{
var win_2;
var a = 3;
f();
var selectedRecord = _grid.getSelectionModel().getSelected();
// 獲得多個(gè)數(shù)據(jù)
if (selectedRecord == undefined || selectedRecord == null)
{
Ext.MessageBox.alert("提示", "請(qǐng)先選擇一條記錄！");
} else {
win_2 = new Ext.Window
({
title : "修改用戶",
width : 350,
height : 250,
closeAction : "hide",
plain : true,
modal : true,// 模態(tài)窗口，當(dāng)打開當(dāng)前窗口時(shí)，后面的內(nèi)容被遮擋
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:"數(shù)據(jù)修改中...",
success:function(form,action)
{
win_2.hide();
Ext.MessageBox.alert("提示","數(shù)據(jù)修改成功");
_ds.reload();
},
failure : function(form, action) {
win_2.hide();
Ext.MessageBox.alert("提示","<font color='red'>數(shù)據(jù)修改失敗</font>");
_ds.load();
}
});
}
},
{
text : "重置",handler:function()
{
fpanel.getForm().reset();
}
},
{
text: '關(guān)閉',handler: function()
{
win_2.close();
}
}
]
});
}
win_2.show();
// 將選中的數(shù)據(jù)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("提示", "請(qǐng)先選擇一條記錄！");
} else {
Ext.MessageBox.confirm("提示信息", "確定要?jiǎng)h除嗎？", 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 : "刪除時(shí)發(fā)生錯(cuò)誤"
});
}
});
}
})
}
}
function chkSelects()
{
var selects = _grid.getSelectionModel().getSelections();
alert("選中的總數(shù)為："+selects.length);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search(){
//fpanel.GridPanel().reset();init();
logins.getForm().submit({ //提交表單事件
//clientValidation: true,
method:"POST", //提交方式(POSTT和GET)
url:"search.php", //表單提交URL地址
waitMsg:"請(qǐng)稍等,正在搜索...", //提交未完成提示框內(nèi)容
waitTitle:"正在搜索", //提示框標(biāo)題信息
});
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文件
復(fù)制代碼 代碼如下:
<?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文件如下：
復(fù)制代碼 代碼如下:
<?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文件如下：
復(fù)制代碼 代碼如下:
<?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;
}
?>
數(shù)據(jù)庫文件men.sql
數(shù)據(jù)庫名叫：stu
表名為：men
可以把下面的復(fù)制到一個(gè)文本文檔里，然后新建stu數(shù)據(jù)庫，導(dǎo)入就可以。
復(fù)制代碼 代碼如下:
-- phpMyAdmin SQL Dump
-- version 2.11.2.1
-- http://www.phpmyadmin.NET
--
-- 主機(jī): localhost
-- 生成日期: 2012 年 01 月 11 日 10:02
-- 服務(wù)器版本: 5.0.45
-- php 版本: 5.2.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- 數(shù)據(jù)庫: `stu`
--
-- --------------------------------------------------------
--
-- 表的結(jié)構(gòu) `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 ;
--
-- 導(dǎo)出表中的數(shù)據(jù) `men`
--
INSERT INTO `men` (`id`, `name`, `pass`, `sex`, `email`) VALUES
(1, '趙四', '123456', 'female', '[email protected]'),
(2, '測(cè)試修改', '123456', 'male', '[email protected]'),
(8, '趙勇2', '123456', 'male', '[email protected]'),
(9, '趙勇3', '123456', 'male', '[email protected]'),
(10, '趙勇5', '123456', 'male', '[email protected]'),
(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', '[email protected]'),
(24, 'saf', 'asdfs', 'male', 'asdf'),
(25, 'dfgdfg', 'dfgdfg', 'male', 'dfgdfg'),
(26, 'ertert', 'erter', 'male', 'tertert'),
(27, '1asdf', 'sdf', 'male', 'sdf');
php技術(shù)：解析Extjs與php數(shù)據(jù)交互(增刪查改)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
