// 1. Create a url category class.
Var url = 'index. php ';
Var _ proxy = new Ext. data. HttpProxy ({url: url });
// 2. Data problem Parameters
Var _ jsonProperty = "totalProperty ";
// Data root directory Parameters
Var _ jsonRoot = "root ";
// Record display list correspondence
Var _ record = [{name: 'id '},
{Name: 'name '},
{Name: 'pass '},
{Name: 'sex '},
{Name: 'email '}];
// Create a JSONReader object. Set the total number of records, root directory name, and record ing.
Var _ reader = new Ext. data. JsonReader ({totelPropetty: _ jsonProperty, root: _ jsonRoot}, _ record );
/**
* Encapsulate the Record object cache of a client to provide a data entry for GridPanel
* Two required parameters are required.
* 1. Data address: Proxy
* 2. Data Reading method: Reader class, which is read through JsonReader
*/
Var _ store = new Ext. data. Store ({
Proxy: _ proxy,
Reader: _ reader
});
/**
ColumnModel
* The data displays the title information on the page,
* The sequence corresponds to the Record
* Sortable sorting
* Corresponding columns of dataIndex, corresponding to NAME in Record
*
* The first parameter in the handler method indicates the object of the parent class. In this example, it is a GridPanel object.
* The second parameter indicates the row number.
* The third parameter indicates the column number.
*/
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: "username", dataIndex: "name", width: 80, sortable: true },
{Header: "password", dataIndex: "pass", width: 175, sortable: true },
{Header: "gender", dataIndex: "sex", width: 145, sortable: true, renderer: renderSex },
{Header: "email", dataIndex: "email", width: 150, sortable: true}
]);
//// // Search
Var logins = new Ext. form. FormPanel ({
Id: 'myform', // id of the allocation form
Title: 'search by user name ',
Width: 400,
DefaultType: 'textfield ',
Frame: true,
// Method: 'post ',
Collapsible: true, // foldable
BodyPadding: 5,
Layout: 'column', // column layout
Margin: '0 0 10 0 ',
Items :[{
FieldLabel: 'name ',
LabelWidth: 40,
Id: 'name'
}],
Buttons :[{
// Xtype: 'button ',
Text: 'search ',
Margin: '0 0 0 5 ',
Handler: search
},{
// Xtype: 'button ',
Text: 'hiding ',
Margin: '0 0 0 5 ',
Handler: hide
}],
RenderTo: "search"
})
Logins. hide ();
Function hide ()
{
Logins. hide ();
}
//////////////////////////////////////// ///////////////
//////////////////////////////////////// //////////////////////////////////////// ///////////
// Obtain data
Var ds = new Ext. data. Store ({
// Proxy tells us where to obtain the data, Ext. data. MemoryProxy specifically parses js Variables
// Proxy: new Ext. data. MemoryProxy (data ),
// Obtain data through http
Proxy: new Ext. data. HttpProxy ({
Url: url }),
// Obtain json data
Reader: new Ext. data. JsonReader ({
TotalProperty: 'totalproperties ',
Root: 'root'
}, Ext. data. Record. create ([
{Name: 'id '},
{Name: 'name '},
{Name: 'pass '},
{Name: 'sex '},
{Name: 'email '}
])
});
//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////
// Automatic Paging
Var _ pageSize = 16;
Var _ toolbar = new Ext. PagingToolbar ({
Store: ds,
PageSize: _ pageSize,
DisplayInfo: true,
DisplayMsg: 'display records from {0} to {1}, total records from {2 ',
EmptyMsg: 'No data'
});
// Top toolbar button
Var t_toolbar = [
{Id: "addData", text: "Add User", handler: addUser },"-",
{Id: "updateData", text: "User modification", listeners: {"click": updateUser }},"-",
{Id: "deleteData", text: "delete selected user", handler: removeUser },"-",
{Id: "test", text: "test selected", handler: chkSelects },"-",
{Id: "search", text: "search", handler: jump}
];
/**
* GridPanel object
* Data list page
* You must set the Store Data Access Object and title bar display information.
* Store and ColumnModel objects
*/
Var _ grid = new Ext. grid. GridPanel ({
HeaderAsText: false, // if there is a title bar, hide the title bar
Collapsible: true, // foldable
Height: 500,
Width: 1100,
Frame: true, // rounded border
Store: ds,
Title: 'test yii integration ext ',
Cm: _ cm,
Bbar: _ toolbar,
Tbar: t_toolbar
});
Ds. load ({params: {start: 0, limit: _ pageSize }});
_ Grid. render ('test _ id ');
// _ Grid. render ();
/* User information input box, verification */
Var fpanel;
Function f (){
Fpanel = new Ext. form. FormPanel
({
Frame: true, // border rounded corner with background color
LabelAlign: 'right ',
WaitMsgTarget: true,
AutoScroll: true,
ButtonAlign: 'center ',
Items :[
{Xtype: "hidden", name: "id "},
{Xtype: "textfield", fieldLabel: "username", name: "name", anchor: "-20", allowBlank: false, // whether to allow null
BlankText: "The user name cannot be blank! ", LabelWidth: 20 },
{Xtype: "radiogroup", fieldLabel: "gender", columns: 2, allowBlank: false, blktext: "gender cannot be blank! ", Items: [{boxLabel: 'male', name: 'sex', inputValue: 'male'}, {boxLabel: 'female ', name: 'sex', inputValue: 'female'}]},
{Xtype: "textfield", fieldLabel: "password", name: "pass", allowBlank: false, // whether to allow null
BlankText: "The password cannot be blank! ", Anchor:"-20 "},
{Xtype: "textarea", fieldLabel: "email", name: "email", allowBlank: false, // whether to allow null
BlankText: "The email cannot be blank! ", Anchor:"-20 "}
]
});
}
Var win;
/* Add users */
Function addUser ()
{
F ();
Win = new Ext. Window
({
Title: "New User ",
Id: "win ",
// AnimEl: "fly ",
// Layout: "fit ",
Width: 350,
Height: 250,
CloseAction: "close ",
Plain: true,
Modal: true, // modal window. When the current window is opened, the following content is blocked.
BodyStyle: "padding: 3px 0 0 3px ",
Layout: "form ",
LabelWidth: 55,
Items: [fpanel],
Buttons :[
{Text: "save", handler: function ()
{
// When saving, because the Id value is empty, it cannot be converted to the background. The background reports an exception in type conversion. You can set the Id value to 0,
// When processing in the background, do not obtain the Id with a value of 0
Fpanel. findByType ("hidden") [0]. setValue (0 );
Fpanel. getForm (). submit ({
Url: "add. php ",
Method: "POST ",
WaitMsg: "saving data ...",
Success: function (form, action ){
// Business success
Ext. MessageBox. alert ('hprompt ',' added successfully! ');
Win. close ();
Ds. load ({params: {start: 0, limit: _ pageSize }});
},
Failure: function (form, action ){
// Service failure
Obj = Ext. util. JSON. decode (action. response. responseText );
Ext. MessageBox. alert ('hprompt ', obj. errors. reason );
Win. close ();
Ds. load ({params: {start: 0, limit: _ pageSize }});
}
});
}
},
{
Text: "reset", handler: function ()
{
Fpanel. getForm (). reset ();
}
}
]
})
Win. show ();
// Because window is used repeatedly, data may still exist in fpanel after modification, so you need to reset it first.
Fpanel. getForm (). reset ();
}
/* Modify user information */
Function updateUser ()
{
Var win_2;
Var a = 3;
F ();
Var selectedRecord = _ grid. getSelectionModel (). getSelected ();
// Obtain multiple data
If (selectedRecord = undefined | selectedRecord = null)
{
Ext. MessageBox. alert ("prompt", "select a record first! ");
} Else {
Win_2 = new Ext. Window
({
Title: "modifying users ",
Width: 350,
Height: 250,
CloseAction: "hide ",
Plain: true,
Modal: true, // modal window. When the current window is opened, the following content is blocked.
BodyStyle: "padding: 3px 0 0 3px ",
// Layout: "form ",
Layout: "fit ",
LabelWidth: 55,
Items: [fpanel],
Buttons :[
{Text: "modify", handler: function ()
{Fpanel. getForm (). submit
({
Url: "edit. php ",
Method: "POST ",
WaitMsg: "modifying data ...",
Success: function (form, action)
{
Win_2.hide ();
Ext. MessageBox. alert ("prompt", "data modified successfully ");
_ Ds. reload ();
},
Failure: function (form, action ){
Win_2.hide ();
Ext. MessageBox. alert ("prompt", "<font color = 'red'> data modification failed </font> ");
_ Ds. load ();
}
});
}
},
{
Text: "reset", handler: function ()
{
Fpanel. getForm (). reset ();
}
},
{
Text: 'close', handler: function ()
{
Win_2.close ();
}
}
]
});
}
Win_2.show ();
// Load the selected data to the window for display
// Alert (win_2 );
Win_2.getComponent (0). getForm (). loadRecord (selectedRecord );
}
/* Delete a user */
Function removeUser (btn)
{
Var selectedRecord = _ grid. getSelectionModel (). getSelected ();
If (selectedRecord = undefined | selectedRecord = null)
{
Ext. MessageBox. alert ("prompt", "select a record first! ");
} Else {
Ext. MessageBox. confirm ("message", "Are you sure you want to delete it? ", 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 ("prompt message", "deleted successfully ");
_ Grid. getStore (). remove (selectedRecord );
Ds. reload ();
} Else {
Ext. Msg. alert ("prompt message", "<font color = 'red'> deletion failed </font> ");
}
},
Failure: function ()
{
Ext. MessageBox. show
({
Title: "prompt message ",
Msg: "An error occurred when deleting"
});
}
});
}
})
}
}
Function chkSelects ()
{
Var selects = _ grid. getSelectionModel (). getSelections ();
Alert ("Total number of selected items:" + selects. length );
}
//////////////////////////////////////// //////////////////////////////////////// ////////////////////////////////
Function search (){
// Fpanel. GridPanel (). reset (); init ();
Logins. getForm (). submit ({// submit a form event
// ClientValidation: true,
Method: "POST", // submission method (POSTT and GET)
Url: "search. php", // URL of Form submission
WaitMsg: "Please wait, search...", // submit the content in the prompt box that has not been completed
WaitTitle: "Searching", // prompt box title information
});
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 fileCopy codeThe Code is as follows: <? 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;
?>
The Add. php file is as follows:Copy codeThe Code is as follows: <? 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 = 'aaa ';
$ Pwd = 'aaa ';
$ Time = '2017-12-31 ';
$ Email = 'aaa ';*/
$ SQL = "INSERT INTO men (username, password, regTime, email) VALUES ('{$ name}', '{$ pwd}', '{$ time }', '{$ email }')";
// Mysql_query ($ SQL)
If (mysql_query ($ SQL ))
{
Echo 'OK ';
}
?>
The Del. php file is as follows:Copy codeThe Code is as follows: <? 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;
}
?>
Database File men. SQL
Database Name: stu
Table Name: men
You can copy the following to a text document, create a new stu database, and import it.Copy codeThe Code is as follows: -- phpMyAdmin SQL Dump
-- Version 2.11.2.1
Http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Date: January 11, 2012
-- Server version: 5.0.45
-- PHP version: 5.2.5
SET SQL _MODE = "NO_AUTO_VALUE_ON_ZERO ";
--
-- Database: 'stu'
--
----------------------------------------------------------
--
-- Table structure '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;
--
-- Export the data 'men' In the table'
--
Insert into 'men '('id', 'name', 'pass', 'sex', 'email') VALUES
(1, 'zhao si', '000000', 'female ', '2017 @ qq.com '),
(2, 'test modify', '123456', 'male', 'test @ qq.com '),
(8, 'zhao Yong 2', '123', 'male', 'sfsf @ qq.com '),
(9, 'zhao Yong 3', '123', 'male', 'sfsf @ qq.com '),
(10, 'zhao Yong 5', '123', 'male', 'sfsf @ qq.com '),
(11, 'asdfsf ', 'asfsfsf', 'male', 'safsf '),
(18, '12', '123', 'male', '123 '),
(19, '123', '123', 'female ', '123 '),
(20, '123', '123', 'female ', '123 '),
(21, 'safety ddf', 'sdf ', 'female', 'sdf '),
(22, 'sdfsdf ', 'sdfsdf', 'male', 'sdf '),
(23, 'test', 'test', 'male', 'test @ qq.com '),
(24, 'saf', 'asdfs ', 'male', 'asdf '),
(25, 'dfgdfg', 'dfgdfg', 'male', 'dfgdfg '),
(26, 'ertert', 'erter', 'male', 'tertert '),
(27, '1asdf ', 'sdf', 'male', 'sdf ');
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
