Extjs的Window中加入Tree和Grid

在Window中加入一些其他的控件是非常有用的，因为他展示出来的效果也是非常明显的，通过弹出框的值赋值给其他组件。所用的Extjs是3.2的。json包是fastjson-1.1.15.jar包。代码如下：

java类：

bo类：

TreeBo:


import java.util.List;




public class TreeBo {

private int id;//节点id

private String text;//节点显示名称

private String cls;//节点图标

private Boolean leaf;//是否叶子节点

private String qtip;//提示信息

private String href;

private List<TreeBo> children;//下级节点

private String military;//军区

private String fighting;//战斗力

private String uiProvider;

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public String getCls() {

return cls;

}

public void setCls(String cls) {

this.cls = cls;

}

public Boolean getLeaf() {

return leaf;

}

public void setLeaf(Boolean leaf) {

this.leaf = leaf;

}

public List<TreeBo> getChildren() {

return children;

}

public void setChildren(List<TreeBo> children) {

this.children = children;

}

public String getQtip() {

return qtip;

}

public void setQtip(String qtip) {

this.qtip = qtip;

}

public String getHref() {

return href;

}

public void setHref(String href) {

this.href = href;

}

public String getMilitary() {

return military;

}

public void setMilitary(String military) {

this.military = military;

}

public String getFighting() {

return fighting;

}

public void setFighting(String fighting) {

this.fighting = fighting;

}

public String getUiProvider() {

return uiProvider;

}

public void setUiProvider(String uiProvider) {

this.uiProvider = uiProvider;

}

}

GridBo:



import java.util.List;




public class GridBo {

private int totalProperty;

private String id;

private String name;

private List root;

public int getTotalProperty() {

return totalProperty;

}

public void setTotalProperty(int totalProperty) {

this.totalProperty = totalProperty;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public List getRoot() {

return root;

}

public void setRoot(List root) {

this.root = root;

}

}

action类:




import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;




import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;




import org.apache.struts2.ServletActionContext;




import com.alibaba.fastjson.JSONObject;

import com.test.bo.GridBo;

import com.test.bo.TreeBo;

public class FunctionListAction {

private List<TreeBo> treeList;

public void testTree(){

treeList = new ArrayList<TreeBo>();

TreeBo cdAllMilitary = new TreeBo();

cdAllMilitary.setText("成都军区");

cdAllMilitary.setCls("folder");

cdAllMilitary.setLeaf(false);

cdAllMilitary.setId(1);

cdAllMilitary.setQtip("司令");

treeList.add(cdAllMilitary);



List<TreeBo> cdMilitary = new ArrayList<TreeBo>();

cdAllMilitary.setChildren(cdMilitary);

TreeBo cq = new TreeBo();

cq.setText("重庆军区");

cq.setCls("folder");

cq.setLeaf(true);

cq.setId(11);

cq.setQtip("1军长");

cq.setHref("functionList.jsp");

cdMilitary.add(cq);

TreeBo km = new TreeBo();

km.setText("昆明军区");

km.setCls("folder");

km.setLeaf(true);

km.setId(12);

km.setQtip("2军长");

cdMilitary.add(km);



TreeBo bjAllMilitary = new TreeBo();

bjAllMilitary.setText("北京军区");

bjAllMilitary.setCls("folder");

bjAllMilitary.setLeaf(false);

bjAllMilitary.setId(2);

bjAllMilitary.setQtip("军委");

treeList.add(bjAllMilitary);



List<TreeBo> bjMilitary = new ArrayList<TreeBo>();

bjAllMilitary.setChildren(bjMilitary);

TreeBo bj = new TreeBo();

bj.setText("北京军区");

bj.setCls("folder");

bj.setLeaf(true);

bj.setId(21);

bj.setQtip("3军长");

bjMilitary.add(bj);



TreeBo tj = new TreeBo();

tj.setText("天津军区");

tj.setCls("folder");

tj.setLeaf(true);

tj.setId(22);

tj.setQtip("4军长");

bjMilitary.add(tj);





treeTest = JSONObject.toJSON(treeList).toString();

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

try {

PrintWriter writer = response.getWriter();

writer.print(JSONObject.toJSON(treeList).toString());

} catch (IOException e) {

e.printStackTrace();

}

}

public void grid(){

int start = Integer.parseInt(ServletActionContext.getRequest().getParameter("start"));

int limit = Integer.parseInt(ServletActionContext.getRequest().getParameter("limit"));

GridBo grid = new GridBo();

grid.setTotalProperty(100);

List list = new ArrayList();

String root = "";

for(int i = start;i < start+limit;i++){

Map obj=new HashMap();

obj.put("id", i);

obj.put("name", "name"+i);

list.add(obj);

}

grid.setRoot(list);

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

try {

PrintWriter writer = response.getWriter();

writer.print(JSONObject.toJSON(grid).toString());

} catch (IOException e) {

e.printStackTrace();

}

}

}


struncts.xml配置：



<package name="struts2" namespace="/" extends="struts-default">

<action name="function_*" class="com.test.action.FunctionListAction" method="{1}"></action>

</package>

window1.js:




Ext.onReady(function(){

//tree

var tree3 = new Ext.tree.TreePanel({

    autoScroll:true,

    animate:true,

    enableDD:true,

    autoHeight:true,

    autoWidth:true,

    containerScroll:true,

    loader:new Ext.tree.TreeLoader({dataUrl:'function_testTree.action'})

});

var root3 = new Ext.tree.AsyncTreeNode({

    text:'中国军区',

    draggable:false,

    id:'testTree'

});

tree3.setRootNode(root3);

//grid

var cm = new Ext.grid.ColumnModel([

   {header:'编号',dataIndex:'id',width:50,sortable:true},

   {header:'名称',dataIndex:'name',width:100,sortable:true}

]);

var store = new Ext.data.Store({

    proxy:new Ext.data.HttpProxy({url:'function_grid.action'}),

    reader:new Ext.data.JsonReader({

        totalProperty:'totalProperty',

        root:'root',

        fields:[

          {name:'id'},

          {name:'name'}

        ]})

});

var grid = new Ext.grid.GridPanel({

    store:store,

    cm:cm,

    width:500,

    autoHeight:true,

    stripeRows:true,

    loadMask:true,

    viewConfig:{

    forceFit:true,

    enableRowBody:true,

    columnsText:'显示的列',

    sortAscText:'升序',

    sortDescText:'降序',

    scrollOffset:1

    },

    bbar:new Ext.PagingToolbar({

       pageSize:10,

       store:store,

       displayInfo:true,

       displayMsg:'显示第{0}条到{1}条记录,一共{2}条',

       emptyMsg:'没有记录'

    })

});

store.load({params:{start:0,limit:10}});



    var tabs = new Ext.TabPanel({

       region:'center',

       defaults:{autoScroll:true},

       activeTab:0,

       items:[

          {

            title:'默认',items:[grid]

          },

          {

            title:'标签',

            html:'内容'

          },

          {

            title:'可关闭',

            html:'内容',

            closable:true

          }

       ]

    });

    var nav = new Ext.Panel({

        title:'导航',

        region:'west',

        split:true,

        width:200,

        items:[tree3],

        collapsible:true

     });

     var win = new Ext.Window({

         title:'复杂布局',

         colseable:true,

         width:720,

         height:330,

         border:false,

         layout:'border',

         items:[nav,tabs]

     }); 

     win.show();

});

window1.jsp文件：



<html>

  <head>

     <script type="text/javascript"></script>

     <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">

     <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>

     <script type="text/javascript" src="./ext/ext-all.js"></script>

     <script type="text/javascript" src="./js/window1.js"></script>

  </head>

 

  <body>

     <div id="window-win"></div>

  </body>

</html>

效果图如下: