ExtJS技术

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的插件来实现。