How to exchange data between Extjs and php
This article mainly shows you "how to exchange data between Extjs and php". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn how to exchange data between Extjs and php.
The code is as follows:
/ / the search has not been done for the time being. The data is out, but it cannot be displayed.
Ext.QuickTips.init (); / / initialize Quick prompt object
Function test () {
Ext.Msg.alert ('title','test-yii-ext')
}
Function renderSex (value) {
If (value = = 'male') {
Return "Red Man"
"
} else {
Return Green Girl
"
}
}
Function init ()
{
/ / 1. Create a url access 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'}]
/ / to create a JSONReader object, you need to set the total number of records, root directory name, and record mapping
Var _ reader = new Ext.data.JsonReader ({totelPropetty:_jsonProperty,root:_jsonRoot}, _ record)
/ * *
* encapsulate a client-side Record object cache to provide data entry for GridPanel
* two required parameters are required
* 1. Address for providing data: Proxy proxy class
* 2. How to read data: Reader class, which is read through JsonReader.
, /
Var _ store = new Ext.data.Store ({
Proxy:_proxy
Reader:_reader
});
/ * *
ColumnModel
* data displays title information on the page
* sequence corresponds to Record
* whether sortable is sorted
* dataIndex carries out the corresponding column, which corresponds to the NAME in Record
*
* the first parameter in the handler method represents the object of the parent class, in this case the GridPanel object.
* the second parameter represents the number of lines.
* the third parameter represents the column.
, /
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: "user name", 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',// assignment form id
Title: 'search by user name'
Width: 400
DefaultType: 'textfield'
Frame: true
/ / method: 'POST'
Collapsible: true,// collapsible
BodyPadding: 5
Layout: 'column',// column layout
Margin:'0 0100'
Items: [{
FieldLabel: 'name'
LabelWidth: 40
Id: 'name'
}]
Buttons: [{
/ / xtype: 'button'
Text: 'search'
Margin: '0.005'
Handler: search
}, {
/ / xtype: 'button'
Text: 'hidden'
Margin: '0.005'
Handler: hide
}]
RenderTo: "search"
})
Logins.hide ()
Function hide ()
{
Logins.hide ()
}
/ / /
/
/ / obtain data
Var ds = new Ext.data.Store ({
/ / proxy tells us where to get the data, and 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:'totalProperty'
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:' displays {0} to {1} records for a total of {2}'
EmptyMsg:' has no data yet.
});
/ / Top toolbar button
Var t_toolbar = [
{id: "addData", text: "user add", 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
* Store data access object and title bar display information must be set
* namely Store and ColumnModel objects
, /
Var _ grid = new Ext.grid.GridPanel ({
HeaderAsText: false, / / if there is a title block, hide it
Collapsible: true,// collapsible
Height:500
Width:1100
Frame:true,// fillet 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, verify * /
Var fpanel
Function f () {
Fpanel = new Ext.form.FormPanel
({
Frame: true,// has rounded corners and background color
LabelAlign: 'right'
WaitMsgTarget: true
AutoScroll: true
ButtonAlign: 'center'
Items: [
{xtype: "hidden", name: "id"}
{xtype: "textfield", fieldLabel: "user name", name: "name", anchor: "- 20", whether allowBlank:false,// is allowed to be empty
BlankText: "user name is not allowed to be empty!" , labelWidth: 20}
{xtype: "radiogroup", fieldLabel: "gender", columns:2,allowBlank:false,blankText: "gender is not allowed to be empty!" , items: [{boxLabel:' male', name:'sex',inputValue:'male'}, {boxLabel:' female', name:'sex',inputValue:'female'}]}
{xtype: "textfield", fieldLabel: "password", name: "pass", whether allowBlank:false,// is allowed to be empty
BlankText: "password is not allowed to be empty!" , anchor: "- 20"}
{xtype: "textarea", fieldLabel: "email", name: "email", whether allowBlank:false,// is allowed to be empty
BlankText: "mailbox is not allowed to be empty!" , anchor: "- 20"}
]
});
}
Var win
/ * add users * /
Function addUser ()
{
F ()
Win = new Ext.Window
({
Title: "New users"
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 obscured
BodyStyle: "padding:3px 0 0 3px"
Layout: "form"
LabelWidth:55
Items: [fpanel]
Buttons: [
{text: save, handler: function ()
{
/ / when saving, the ID value is empty, so it cannot be converted to the background. If the background report type conversion exception, you can set the Id to 0.
/ / when processing in the background, do not get the Id with a value of 0
Fpanel.findByType ("hidden") [0] .setValue (0)
Fpanel.getForm () .submit
Url: "add.php"
Method: "POST"
WaitMsg: "Save data..."
Success: function (form, action) {
/ / Business success
Ext.MessageBox.alert ('prompt', 'added successfully')
Win.close ()
Ds.load ({params: {start:0,limit:_pageSize}})
}
Failure: function (form, action) {
/ / Business failed
Obj = Ext.util.JSON.decode (action.response.responseText)
Ext.MessageBox.alert ('prompt', obj.errors.reason)
Win.close ()
Ds.load ({params: {start:0,limit:_pageSize}})
}
});
}
}
{
Text: reset, handler:function ()
{
Fpanel.getForm () .reset ()
}
}
]
})
Win.show ()
/ / because of the repeated use of window, there may still be data in the modified fpanel, so 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", "Please select a record first!")
} else {
Win_2 = new Ext.Window
({
Title: "modify user"
Width: 350
Height: 250
CloseAction: "hide"
Plain: true
Modal: true,// modal window, when the current window is opened, the following content is obscured
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: "data modification."
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", "data modification failed")
_ ds.load ()
}
});
}
}
{
Text: reset, handler:function ()
{
Fpanel.getForm () .reset ()
}
}
{
Text: 'close', handler: function ()
{
Win_2.close ()
}
}
]
});
}
Win_2.show ()
/ / load the selected data to window for display
/ / alert (win_2)
Win_2.getComponent (0). GetForm (). LoadRecord (selectedRecord)
}
/ * Delete user * /
Function removeUser (btn)
{
Var selectedRecord = _ grid.getSelectionModel () .getSelected ()
If (selectedRecord = = undefined | | selectedRecord = = null)
{
Ext.MessageBox.alert ("prompt", "Please select a record first!")
} else {
Ext.MessageBox.confirm ("prompt", "are you sure you want to delete?" , 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", "deletion failed")
}
}
Failure: function ()
{
Ext.MessageBox.show
({
Title: "prompt message"
Msg: "error occurred while deleting"
});
}
});
}
})
}
}
Function chkSelects ()
{
Var selects = _ grid.getSelectionModel () .getSelections ()
Alert ("Total number of selections is:" + selects.length)
}
/
Function search () {
/ / fpanel.GridPanel () .reset (); init ()
Logins.getForm (). Submit ({/ / submit form event
/ / clientValidation: true
Method: "POST", / / submission method (POSTT and GET)
Url: "search.php", / / form submission URL address
WaitMsg: "Please wait a moment, searching for...", / / submit the contents of the unfinished prompt box
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)
Index.php file
The copy code is as follows:
The Add.php file is as follows:
The copy code is as follows:
