萬盛學電腦網 >> 網絡編程 >> php編程 >> 解析Extjs與php數據交互(增刪查改)
解析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],
- 上一頁:解析php多線程下載遠程多個文件
- 下一頁:關於PHP內存溢出問題的解決方法
php編程排行
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved