The tables in ExtJS are powerful, including the ability to sort, cache, drag, hide a column, automatically display line numbers, column totals, cell editing, and more. But many people in the application of the time will be because of some details of the distress, why the message does not come out. Why s.gif picture in the case of broken nets can not show ah. Why can't I get JSON data from the background? Why the date format cannot be converted AH. Why turn the page is an error. Why drag function is not realized AH. Wait, wait. Finally boil down to a sentence, why ExtJS so messy ah. Oh, in order to help you solve the ExtJS of these small trouble, Xu did a small demo below to demonstrate the use of gridpanel, there will be time to continue to demonstrate the main use of other components. My wish is that you have seen this small topic, can in the shortest possible time to master the various components of EXTJS application. As for the basic skills of cultivation, but also trouble everyone their own heart. Well, not much, let's look at the most useful components in ExtJS: The table panel.
The table is defined by the class Ext.grid.GridPanel, inherits from the panel, and its xtype is grid. In ExtJS, table grid must contain column definition information and specify the data storage store for the table. The column information of the table is defined by the class Ext.grid.ColumnModel, and the data storage of the table is defined by Ext.data.Store. These are basic knowledge, we should be clear. The main thing to keep in mind is that the JSON data format is the main ExtJS, Columnmodel is the definition of the column to display the table, and the store is the source of the data record. Then, the data can be divided into local and remote data, they use a different proxy, the data format has array,json,xml, for each data format ExtJS have a corresponding resolution, is the store reader. Our core of course is to master the use of remote JSON data in the store first. Let's take a look at an example that includes the common functions of a general table, such as changing column data as required, right-click menu, panel folding, powerful drag (drag/drop), and paging.
Put out the complete code: divided into 3 parts
(1) grid.html part
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<link rel= "stylesheet" type= "Text/css" href= "Resources/css/ext-all.css" >
<script type= "Text/javascript" src= "Resources/js/ext-base.js" ></script>
<script type= "Text/javascript" src= "Resources/js/ext-all.js" ></script>
<script type= "Text/javascript" src= "Resources/js/ext-lang-zh_cn.js" ></script>
<script type= "Text/javascript" src= "Resources/js/grid.js" ></script>
<style type= "Text/css" >
</style>
<body>
<div id= "Mygrid" ></div>
</body>
Comparison of simple, hehe!!
Core JS File
Ext.onready (function () {
Ext.QuickTips.init ()//floating information hint
Ext.blank_image_url = ' resources/images/default/s.gif ';//Replace picture file address is local
To define a data source as a remote proxy and JSON data format
var ds = new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({
This URL, is back in the background of the data, this URL can be struts action, also can be servlet, here for convenience is a JSP file
URL: ' resjson.jsp '
}),
Reader:new Ext.data.JsonReader ({
This totalproperty and root properties, and the background of the file resjson.jsp in the same!!
Totalproperty: ' Totalproperty ',
Root: ' Root '
}, [{
Name: ' ID '
}, {
Name: ' Name '
}, {
Name: ' Sex '
}, {
Name: "Birthday",
Type: "Date",
DateFormat: "Y-n-j"
}, {
Name: ' Email '
}])
});
Load home data, display 10 records per page
Ds.load ({
Params: {
start:0,
Limit:10
}
});
Define check box
var sm = new Ext.grid.CheckboxSelectionModel ();
Defining a column model
var cm = new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),//Add automatic line number
sm,//Add check box
{
Header: ' School Number ',
WIDTH:40,
Dataindex: ' ID '
}, {
Header: ' Name ',
Dataindex: ' Name '
}, {
Header: ' Sex ',
WIDTH:40,
Dataindex: ' Sex ',
Renderer:changesex
Dolls
}, {
Header: ' Date of birth ',
Dataindex: ' Birthday ',
Renderer:Ext.util.Format.dateRenderer (' Y year m month d ')
Format Date
}, {
Header: ' E-mail ',
WIDTH:120,
Dataindex: ' Email ',
Renderer:sendemail
Click Start mail client to send mail
}]);
Set default sorting for all column fields
Cm.defaultsortable = true;
Render other functions as required
function Changesex (value) {
if (value = = ' man ') {
Return "<span style= ' color:red;font-weight:bold; ' > Male </span> ";
} else {
Return "<span style= ' color:green;font-weight:bold; ' > Women </span> ";
}
}
function to render email as required
function SendEmail (value) {
Return "<a Href=mailto:" + value + ">" + value + "</a>";
}
Define a table panel
var Grid = new Ext.grid.GridPanel ({
ID: ' Student-grid ',//Set identification ID, easy to reference later.
Title: ' Student Information management ',//titles
Where the data is displayed, note that the renderto here should be consistent with the div in the HTML file!!
Renderto: ' Mygrid ',//Where the table is displayed
sm:sm,//check box
cm:cm,//column Model
ds:ds,//Data source
striperows:true,//Plus line stripes
loadmask:true,//the table when loading data
border:true,//Plus border
frame:true,//Display Azure Fillet box
autoheight:true,//set height automatically, this configuration is important
width:700,
x:1,//set the initial position of the horizontal axis
y:1,//set initial position ordinate
enabledragdrop:true,//allow rows to be towed
Collapsible:true,//panel can be folded
titlecollapse:true,//Click anywhere in the header to collapse
floating:true,//set float, can drag success depends on it, pay attention to set the float it on the top
Implement drag effect, refer to official documentation
Draggable: {
Insertproxy:false,
Ondrag:function (e) {
var PEL = This.proxy.getEl ();
This.x = Pel.getleft (true);
This.y = Pel.gettop (true);
var s = this.panel.getEl (). shadow;//Drag to remove shadow from original position
if (s) {
S.realign (This.x, This.y, Pel.getwidth (),
Pel.getheight ());
}
},
Enddrag:function (e) {//Drag end Save position effect
This.panel.setPosition (this.x, THIS.Y);
}
},
UI View Configuration
Viewconfig: {
Forcefit:true
Force Fit Distribution width
},
The top Action or button toolbar of a table
Tbar:new Ext.toolbar ({
Items: [{
ID: ' Btnadd ',
Text: "Add",
Handler:function () {
Ext.MessageBox.alert ("Add",
"Doing the added action");
}
}, New Ext.Toolbar.SplitButton ({}), {
ID: ' Btnedit ',
Text: "Edit",
Handler:function () {
Ext.MessageBox.alert ("Edit",
"Doing the editing");
}
}, '-', {
ID: ' Btndel ',
Text: "Delete",
Handler:function () {
Ext.MessageBox.alert ("Delete",
"Action to delete");
}
}]
}),
Table Bottom Section page toolbar
Bbar:new Ext.pagingtoolbar ({
Pagesize:6,
Store:ds,
Displayinfo:true,
Displaymsg: ' Show {0} to {1} records, altogether {2} ',
Emptymsg: "No Record"
})
});
Add the right key event to the grid dynamically, Rowcontextmenu is the event name, RIGHTCLICKFN is the handler function of the event trigger
Grid.on (' Rowcontextmenu ', RIGHTCLICKFN);
var rightclickmenu = new Ext.menu.Menu ({
ID: ' Rightclickcont ',
Items: [{
ID: ' RMenu1 ',
Events triggered by handler:rmenu1fn,//click
Text: ' Right-click menu 1 '
}, {
ID: ' RMENU2 ',
HANDLER:RMENU2FN,
Text: ' Right-click menu 2 '
}]
});
function Rightclickfn (grid, rowindex, e) {
E.preventdefault ()//block browser default right button effect
Rightclickmenu.showat (E.getxy ())//Display menu in the right click Place rightclickmenu
}
function Rmenu1fn () {
Ext.MessageBox.alert (' Right ', ' You can customize the right-click processing. ")//Only 锟 catty a 锟 catty 锟 catty handcuffs
}
});
This is the core of the JS file, the foreground of the HTML file, is through this JS file.
(3) resjson.jsp (background file, this file can be struts action or servlet, here is convenient directly is a JSP file)
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8" import= "java.util.*,org.leno.javabean.*,net.sf.json.*"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>grid</title>
<body>
<%!private static list<student> List = new arraylist<student> ();
static {
for (int i = 0; i < i++) {
Student stu = new Student ();
Stu.setid (i);
Stu.setname ("LENO" + i);
if (i% 2 = 0) {
Stu.setsex (' Male ');
} else {
Stu.setsex (' female ');
}
Stu.setbirthday ("2003-12-11");
Stu.setemail ("LENO@126.com");
List.add (Stu);
}
}%>
<%
Request.setcharacterencoding ("UTF-8");
Response.setcharacterencoding ("UTF-8");
System.out.println (Request.getparameter ("name") + "attribute");
Jsonobject json = new Jsonobject ();
String Strstart = Request.getparameter ("Start");
String strlimit = Request.getparameter ("Limit");
int start = Integer.parseint (Strstart);
int limit = Integer.parseint (strlimit);
list<student> arrlist = list.sublist (start, start + limit);
Json.put ("Totalproperty", 100);
Jsonarray arr = Jsonarray.fromobject (arrlist);
Json.put ("root", arr);
SYSTEM.OUT.PRINTLN (JSON);
Response.getwriter (). print (JSON);
Out.clear ();
out = Pagecontext.pushbody ();
%>
</body>
OK, you can test, everyone in the test, pay attention to the ExtJS package import (json-lib 6 package file), and the corresponding ExtJS core CSS and js file path.
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
