Complete ExtJs GridPanel instance

The page effect is as follows:

 

View plaincopy to clipboardprint?
<Mce: script type = "text/javascript"> <! --
Ext. onReady (function (){
// Initialize Extjs
Ext. QuickTips. init ();
Ext. BLANK_IMAGE_URL = './resources/images/default/s.gif ';
// Read data first, in Json format
Var store = new Ext. data. Store
({
// Use the json method to read data sources (three methods: 1. Use JsonReader to read json and 2. Use ArrayReader3. use XmlReader to read XML)
Reader: new Ext. data. JsonReader
({
Root: "Table ",
// The total number of records read from the database
TotalProperty: 'totalcount ',
// Fields to be read
Fields:
[
'Id', 'rolename', 'remark'
]
}),
// Obtain the data source (this method returns a data source in json format)
Proxy: new Ext. data. HttpProxy
({
Url: 'http: // www.cnblogs.com/BackGround/RoleManage/Role.ashx? AutoLoad = true'
})
});
// Define the column name of the GridPanel
Var cms = new Ext. grid. ColumnModel
(
[
New Ext. grid. RowNumberer ({header: "No.", width: 30, align: "center"}), // Add a number
New Ext. grid. CheckboxSelectionModel (), // Add a CheckBox multi-choice Box Column
// Header column name, which corresponds to the database field name of dateIndex. sortable supports sorting.
{Header: "role name", dataIndex: "RoleName", sortable: true },
{Header: "role remarks", dataIndex: "Remark", sortable: true}

]
);
// Edit the panel for adding and modifying
Var Edit_Panel = new Ext. FormPanel ({
LabelWidth: 75,
LabelAlign: 'right ',
Frame: true,
BodyStyle: 'padding: 5px 5px 0 ',
Width: 380,
Defaults: {width: 150 },
DefaultType: 'textfield ',
Items:
[
{
FieldLabel: 'Role number ',
Name: 'id ',
Xtype: 'ddy'
},
{
// Label name
FieldLabel: 'Role name ',
// Textfield name
Name: 'rolename ',
// Textfield regular
AllowBlank: false, // whether to allow null! False not allowed
BlankText: "cannot be blank", // prompt message
MinLength: 2,
MinLengthText: "The name must contain at least 2 characters ",
MaxLength: 4,
MaxLengthText: "The name can contain up to four characters ",
Regex:/[\ u4e00-\ u9fa5] // Regular Expression
RegexText: "Chinese only"
},
{
FieldLabel: 'Role encoding ',
Name: 'Role Code ',
AllowBlank: false,
BlankText: "cannot be blank ",
Xtype: 'ddy'
},
{
FieldLabel: 'description ',
Name: 'remark'

}
]

});
// Pop-up layer
Var Edit_Window = new Ext. Window ({
Collapsible: true,
Maximizable: true,
MinWidth: 300,
Height: 180,
MinHeight: 200,
Width: 378,
Modal: true,
CloseAction: "hide ",
// The so-called layout refers to the distribution and arrangement of neutron elements in container components.
Layout: 'form', // layout mode is form
Plain: true,
Title: 'edit dialog box ',
BodyStyle: 'padding: 5px ;',
ButtonAlign: 'center ',
Items: Edit_Panel,
Buttons :[{
Text: 'save ',
// Click the Save button to trigger the event
Handler: function (){
// Obtain the value of the Control name whose id is ID in the editing template.
Var ID = Edit_Panel.getForm (). findField ('id'). getValue ();
// Obtain the value of the Control name whose id is RoleName in the editing template.
Var RoleName = Edit_Panel.getForm (). findField ('rolename'). getValue ();
// Var RoleCode = Edit_Panel.getForm (). findField ('rolecode'). getValue ();
Var Remark = Edit_Panel.getForm (). findField ('remark'). getValue ();
Var jsonData = '';
If (ID = '')
// If the ID is null, it indicates the add operation. Otherwise, it indicates the modification operation. The ID, role name (RoleName), role encoding (RoleCode), description (Remark ), the operation type (add operation: AddUser, update operation: UpdateUser) is written as json and uploaded as parameters to the background
JsonData = {operatype: 'addrole', ID: ID, RoleName: RoleName, Remark: Remark };
Else
JsonData = {operatype: 'updaterole', ID: ID, RoleName: RoleName, Remark: Remark };
Edit_Window.hide ();
CodeOperaMethod ('HTTP: // www.cnblogs.com/webui/rolemanage/rolemanege.aspx', jsondata );
// Reload the store information
Store. reload ();
Grid. store. reload ();
}
},{
Text: 'reset ', handler: function () {Edit_Panel.getForm (). reset ();}
}]
});
// Background Data Interaction Method
Var CodeOperaMethod = function (u, p ){
Var conn = new Ext. data. Connection ();
Conn. request ({
// Request Url
Http://www.cnblogs.com/hannover/admin/u,
// Passed parameters
Params: p,
Method: 'post ',
Scope: this,
// Callback function. Different operations are performed based on the execution result. If the operation is successful, information indicating successful operations is displayed. If the operation fails, information indicating failed operations is displayed.
Callback: function (options, success, response ){
If (success) {Ext. MessageBox. alert ("prompt", "Operation successful! ");
Store. reload ();
Grid. store. reload ();
}
Else {Ext. MessageBox. alert ("prompt", "the operation submitted failed! ");}

}});};

// Deletion method
Function delRecord (btn, pressed)
{
// Obtain the name of the control whose ID is MenuGridPanel to obtain the currently selected item.
Rows = Ext. getCmp ("MenuGridPanel"). getSelectionModel (). getSelections ();
If (rows. length = 0)
{
Ext. Msg. alert ("", "Please select at least one row of data you want to delete! ");
Return;
}
Ext. MessageBox. confirm ('hprompt ',' Are you sure you want to delete the selected record? ', ShowResult );}
Function showResult (btn)
{
// Confirm the information of the selected item to be deleted
If (btn = 'yes ')
{
Var row = Ext. getCmp ("MenuGridPanel"). getSelectionModel (). getSelections ();
Var jsonData = "";
For (var I = 0, len = row. length; I <len; I ++)
{
// Obtain the ID set of the selected item
Var ss = row [I]. get ("ID ");
If (I = 0)
JsonData = jsonData + ss;
Else
JsonData = jsonData + "," + ss;
}
// Transfer the information to be deleted to the background for processing, and then reload the grid.
Var conn = new Ext. data. Connection ();
Conn. request ({
Http://www.cnblogs.com/hannover/admin/WebUI/RoleManage/RoleManege.aspx? DelRecode = ",
Params: {strProjects: jsonData },
Method: 'post ',
Scope: this,
Callback: function (options, success, response ){
If (success ){
Ext. MessageBox. alert ("prompt", "the selected record is deleted successfully! ");
Store. reload ();
Grid. store. reload ();
}
Else
{Ext. MessageBox. alert ("prompt", "failed to delete the selected record! ");}
}
})

}
};
// Define a smart ComboBox
Var cmbox = new Ext. form. ComboBox
(
{
Id: 'cmbox ',
Title: 'Role name ',
// Load the data source
Store: store,
// Load data locally (smart sensing effect)
Mode: "local ",
// Display fields similar to DataTextField in DropDownlist
DisplayField: 'rolename ',
// Similar to DataValueField in DropDownlist
ValueField: 'id ',
Width: 160,
// Cannot be blank
AllowBlank: false,
// Default Value
EmptyText: 'Enter the role name to search ...',
// Prompt when it is null
BlankText: 'Enter the role name ...'
}
);
// Construct a GridPanel
Var grid = new Ext. grid. GridPanel
({
Id: 'menugridpanel ',
RenderTo: "gridpanel", // Add the GridPanel to the area with the id gridpanel
Title: 'Role management', // grid title
Width: '200 ',
Height: 500,
Store: store, // grid Data Source
LoadMask: {msg: 'loading data. Please wait... '}, // display the loading icon
Cm: cms, // column name
Sm: new Ext. grid. CheckboxSelectionModel (), // This option is required to display the multi-choice Box Column
// Define a toolbar
Tbar:
[
{
Text: "edit ",
Cls: 'x-btn-text-icon details ',
Icon: "../ext-3.1.0/blue16_042.png ",
Handler: function ()
{
// Reset the editing template
Edit_Panel.getForm (). reset ();
Rows = Ext. getCmp ("MenuGridPanel"). getSelectionModel (). getSelections ();
If (rows. length! = 1)
{
Ext. Msg. alert ("", "Please select a row of data for operations! ");
Return;
}
// Open the form
Edit_Window.show ();
// Bind the information of the selected item to TextField
Edit_Panel.getForm (). findField ('id'). setValue (rows [0]. get ('id '));
// Edit_Panel.getForm (). findField ('rolecode'). setValue (rows [0]. get ('rolecode '));
Edit_Panel.getForm (). findField ('rolename'). setValue (rows [0]. get ('rolename '));
Edit_Panel.getForm (). findField ('remark'). setValue (rows [0]. get ('remark '));

}
},
{
Text: "add ",
Cls: 'x-btn-text-icon details ',
Icon: "../ext-3.1.0/add_16.png ",
Handler: function ()
{
Edit_Panel.getForm (). reset ();
Edit_Window.show ();
}
},
{
Text: "delete ",
Cls: 'x-btn-text-icon details ',
Icon: "../ext-3.1.0/blue16_016.png ",
Handler: delRecord
},'-',

// Define a search box
Cmbox,
'-',
{

Xtype: 'button ',
Cls: 'x-btn-text-icon details ',
Icon: "../ext-3.1.0/blue16_068.png ",
Text: "Search ",
Handler: function ()
{
// Ext. getCmp ("searchfield"). getValue () to get the value of Textfield
// The filter condition is the role name (RoleName) to search for matched information,
// The first parameter of the filter method: the name of the filtered field and the information to be matched by the second parameter,
// The third parameter "true" indicates that the search starts from the start position, and the fourth parameter "false" indicates that the search is case insensitive.
Store. filter ('rolename', Ext. getCmp ("cmbox"). getValue (), false, false );
}
}

],
Bbar: new Ext. PagingToolbar
({// Comes with a paging Toolbar
PageSize: 10,
Store: store,
DisplayInfo: true,
DisplayMsg: 'currently [{0}] </span> to [{1}] data entries, [{2}] data entries in total ',
EmptyMsg: "No data"
})
});
// If the value of start is 0, the default first page is displayed, and the value of limit is 10.
Store. load ({params: {start: 0, limit: 10 }});
});


/--> </Mce: script>