Shulou(Shulou.com)06/03 Report--

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:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.