ExtJS开发时需要将js等资源加入到项目中。
开发时,需要拷贝2个js文件,一组资源文件夹。
编写页面时,在页面中导入js和css文件,顺序不能错。
<script type="text/javascript" src="ext/ext-all-debug.js"></script> <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"> <script type="text/javascript" src="js/test.js"></script> |
在自己建立的test.js中编写打印helloworld的测试代码。
Ext.onReady(function() { Ext.MessageBox.alert("测试","Hello World"); }); |
ExtJS中主要包含的功能:
1) 标签面版
2) 表格功能:分页列表,排序功能,动态修改数据,动态添加数据,动态删除数据
3) 表单功能:AJAX形式表单提交,表单自动验证,多样化的表单元素。
4) 树型功能:支持动态生成AJAX树型列表
5) 布局功能:可以控制界面布局。
6) 窗口功能:window,messagebox
7) 拖放功能
8) 图表功能
ExtJS开发时,页面上一般只保留div,与编写好的Panel面版绑定。
这里建立一个最普通的面版界面。
<div id="test_div"></div> |
在js中建立面版对象,并与div绑定。
Ext.onReady(function() { // Ext.MessageBox.alert("测试","Hello World");
// 建立一个普通面版 var panel = Ext.create("Ext.panel.Panel",{ title : "标题" , html : "<font color='red'>内容</font>" , width : 300 , height : 500 , floating : true , // 可以浮动改变位置 x : 200 , y : 50 , renderTo : "test_div" });
// 加入拖放功能 new Ext.dd.DDProxy(panel);
}); |
标签面版需要配合其他面版来实现切换功能,而且支持动态添加或删除标签的操作。
Ext.onReady(function() { // Ext.MessageBox.alert("测试","Hello World"); // 动态添加标签 var button = Ext.create("Ext.button.Button",{ text : "添加" });
// 加入默认的一些标签页,每个标签页就是一个panel var p1 = Ext.create("Ext.panel.Panel",{ title : "标签1" , html : "内容1" , buttons : [button], buttonAlign : "center" }); var p2 = Ext.create("Ext.panel.Panel",{ title : "标签2" , autoLoad : "include.jsp" // 动态包含其他页面 });
// 建立一个标签面版 var panel = Ext.create("Ext.tab.Panel",{ width : 300 , height : 500 , floating : true , // 可以浮动改变位置 x : 200 , y : 50 , items : [p1,p2], renderTo : "test_div" });
// 加入事件 button.on("click",function(){ // 建立一个新的标签 var newPanel =Ext.create("Ext.panel.Panel",{ title : "新标签" , html : "新内容", closable : true // 允许手工关闭此标签 });
panel.add(newPanel); // 自动切换到新标签中 panel.setActiveTab(newPanel); }); }); |
ExtJS实现分页列表功能
在ExtJS中,编写分页时,后台查询需要传入排序条件,完成动态的排序操作。
@Component public class NewsDAOImpl extends HibernateDaoSupport implements INewsDAO {
@Autowired public NewsDAOImpl(HibernateTemplate hibernateTemplate) { super.setHibernateTemplate(hibernateTemplate); }
public List<News> findAll(int start, int limit, String sort, String dir) throws Exception { DetachedCriteria c = DetachedCriteria.forClass(News.class); if ("DESC".equals(dir)) { c.addOrder(Order.desc(sort)); } else { c.addOrder(Order.asc(sort)); } return getHibernateTemplate().findByCriteria(c, start, limit); }
public int getAllCount() throws Exception { String hql = "SELECT COUNT(n) FROM News AS n"; List all = getHibernateTemplate().find(hql); return ((Long) all.get(0)).intValue(); }
} |
后台完成后,需要在js中实现表格显示的面版
Ext.onReady(function() { // 建立一个数据模型,用来描述返回的json对象的各个属性和类型,以便自动转型,并自动加入到表格中 Ext.define("News",{ extend: 'Ext.data.Model', fields : [{ name : "id" , type : "int" },{ name : "title" , type : "string" },{ name : "pubDate" , type : "date" },{ name : "typeId" , type : "int" }] });
// 建立数据来源 var s = Ext.create("Ext.data.Store",{ model : "News", // 表示后台返回的数据模型是News proxy : { type : "ajax", // 表示数据取得的方式是通过AJAX取得 url : "news_list.action" , // 查询数据的路径 reader : { // 设置返回结果的处理操作 type : "json", // 返回数据格式为json root : "allNews" , // 返回的数据集合的名称为allNews totalProperty : "allCount" // 保存全部记录数的属性名为allCount } } , pageSize : 5 , // 默认每页显示5条数据 autoLoad : true // 自动加载第一页数据 });
// 建立表格面版 var grid = Ext.create("Ext.grid.Panel",{ title : "新闻列表" , width : 500, autoHeight : true , columns : [{ header : "新闻编号" , dataIndex : "id" }, { header : "新闻标题" , dataIndex : "title" }, { header : "新闻发布日期" , dataIndex : "pubDate" }, { header : "分类" , dataIndex : "typeId" }], store : s, renderTo : "test_div" });
}); |
后台编写Action,使用org.json拼写JSON 结果,并返回
@Controller @Scope(value = "prototype") public class NewsAction extends ActionSupport {
private INewsService service;
private int start = 0; private int limit = 5; private String sort = "id"; private String dir = "ASC";
public String list() throws Exception { Map<String, Object> map = service.list(start, limit, sort, dir);
List<News> allNews = (List<News>) map.get("allNews"); int count = (Integer) map.get("allCount");
// 建立要返回的JSON数据 JSONObject root = new JSONObject(); root.put("allCount", count); JSONArray array = new JSONArray();
Iterator<News> iter = allNews.iterator(); while (iter.hasNext()) { News news = iter.next(); JSONObject obj = new JSONObject(); obj.put("id", news.getId()); obj.put("title", news.getTitle()); obj.put("pubDate", news.getPubDate()); obj.put("typeId", news.getTypeId()); array.put(obj); } root.put("allNews", array);
// 返回数据 HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.print(root); out.close(); return null; } |
<package name="root" namespace="/" extends="struts-default"> <action name="news_*" class="newsAction" method="{1}"></action> </package> |
如果想加入翻页,可以通过Paging的工具类来完成。
var pageBar = Ext.create("Ext.toolbar.Paging",{ store : s , pageSize : 5 });
// 建立表格面版 var grid = Ext.create("Ext.grid.Panel",{ title : "新闻列表" , width : 1500, autoHeight : true , columns : [{ header : "新闻编号" , dataIndex : "id" }, { header : "新闻标题" , dataIndex : "title" }, { header : "新闻发布日期" , dataIndex : "pubDate", width : 500 }, { header : "分类" , dataIndex : "typeId" }], store : s, bbar : pageBar, renderTo : "test_div" }); |
对于排序功能,如果想进行排序操作,还需要在store中加入一个允许使用远程排序的属性。
// 建立数据来源 var s = Ext.create("Ext.data.Store",{ remoteSort : true , model : "News", // 表示后台返回的数据模型是News proxy : { type : "ajax", // 表示数据取得的方式是通过AJAX取得 url : "news_list.action" , // 查询数据的路径 reader : { // 设置返回结果的处理操作 type : "json", // 返回数据格式为json root : "allNews" , // 返回的数据集合的名称为allNews totalProperty : "allCount" // 保存全部记录数的属性名为allCount } } , pageSize : 5 , // 默认每页显示5条数据 autoLoad : true // 自动加载第一页数据 }); |
如果允许远程排序,那么后台Action中需要对接收到的sort值进行处理。
public String list() throws Exception { // 解析接收到的JSONArray try { JSONArray array = new JSONArray(sort); JSONObject obj = array.getJSONObject(0); sort = obj.getString("property"); dir = obj.getString("direction"); } catch (Exception e) { e.printStackTrace(); }
|
如果想实现修改功能,需要加入RowEditing或CellEditing的插件来实现。