Question

作为ExtJS的新手，我正在尝试将它与Spring MVC Controller一起使用。所以我的结构如下：tree.jsp从SomeController.java获取JSON数据。我正在使用Tiles 2来连接它们。

tree.jsp

<script type="text/javascript">

if (Ext.BLANK_IMAGE_URL.substr(0,5) != 'data'){
    Ext.BLANK_IMAGE_URL = '/ext-3.3.1/resources/images/default/s.gif';
}

Ext.onReady(function(){

    var proxy = new Ext.data.HttpProxy({
        api: {
            read: 'jsonTree'
        }    
    });

    var treeLoader = new Ext.tree.TreeLoader({
        proxy: proxy
    });

    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        el:'tree-div', //we need to have a div in our html named this
        title: "Data Sources",
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        loader: treeLoader,

        root: {
            nodeType: 'async',
            text: 'Ext JS',
            draggable:false,
            id:'source'
        }
    });

    // render the tree
    tree.render();
});

SomeController.java

@Controller
@RequestMapping("/some")
public class SomeController {

private Logger log = LoggerFactory.getLogger(CountryReferenceBookController.class);
private static final String LIST_VIEW_KEY = "redirect:list.html";
@Autowired
private RestTemplate restTemplate;

@RequestMapping(value = "/jsonTree/{languageId:\\d+}")
public @ResponseBody Map<String, ? extends Object> getJsonTreeInfo(@PathVariable("languageId") Long languageId) {

    List treeList = new ArrayList<Map<String, Object>>();

    List<ReferenceBookTitleImpl> list = new ArrayList<ReferenceBookTitleImpl>();
    list = restTemplate.getForObject("http://localhost:8084/xcollector/restService/reference/list", list.getClass());


    for (ReferenceBookTitleImpl title : list) {
        String description = restTemplate.getForObject("http://localhost:8084/xcollector/restService/reference/title/" + title.getId() + "/content/" + languageId, String.class);

        //create a child node that is a leaf
        Map child = new HashMap();
        child.put("id", title.getId());
        child.put("text", description);
        child.put("checked", Boolean.FALSE);
        child.put("leaf", Boolean.TRUE);

        treeList.add(child);
    }

    //the spring mvc framework takes a hashmap as the model..... :| so in order to get the json array to the View, we need to put it in a HashMap
    Map modelMap = new HashMap();
    modelMap.put("JSON_OBJECT", treeList);

    log.info("jsonArray: " + treeList.toString());
    return modelMap;
}

}

当我向控制器发送GET响应时，我得到一个带有json数组而不是填充树的文件。我的代码出了什么问题？

提前多多感谢， L.

Answer 1

由于没有人问过我自己决定回答我的问题。主要问题是对AJAX调用的错误理解。

如果要从Spring MVC Controller填充树面板，则必须实现两个方法：第一个返回树面板所在的视图，第二个返回填充树面板的数据。

让我们来看看这个例子：

首先，我在项目中使用Tiles 2。所以在带有tiles（templates.xml）的文件中，我添加了一个以下的tile：

<definition name="/tree" extends="defaultTemplate">
    <put-attribute name="title" value="Tree" />
    <put-attribute name="content" value="/WEB-INF/jsp/tree.jsp"/> 
</definition>

负责处理网址http://<ip:port>/<web-app>/tree上的请求的控制器有两种方法：

此方法返回jsp视图：

@RequestMapping(value = "/tree")
public ModelAndView getTreeView() {
    return new ModelAndView("/tree");
}

Next方法返回json数据：

@RequestMapping(value = "/tree/data", method=RequestMethod.POST)
public @ResponseBody List<Map<String, Object>>  getJsonTreeInfo() {

    List treeList = new ArrayList<Map<String, Object>>();

    List<FooImpl> list = new ArrayList<FooImpl>();
    list = restTemplate.getForObject("http://localhost:8084/<web-app>/restService/list", list.getClass());


    for (FooImpl foo : list) {
        String description = restTemplate.getForObject("http://localhost:8084/<web-app>/restService/title/" + foo.getId() + "/content/11", String.class);

        //create a child node that is a leaf
        Map child = new HashMap();
        child.put("id", foo.getId());
        child.put("text", description);
        child.put("leaf", Boolean.TRUE);

        treeList.add(child);
    }
    return treeList;
}

可能不清楚这个列表如何成为json数组。我有一个消息转换器，它正在完成转换的所有工作。

JSP方面：

<script type="text/javascript">
    if (Ext.BLANK_IMAGE_URL.substr(0,5) != 'data'){
        Ext.BLANK_IMAGE_URL = '/ext-3.3.1/resources/images/default/s.gif';
    }

    // application main entry point
    Ext.onReady(function() { 

    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl: 'tree/data',

        root: {
            nodeType: 'async',
            text: 'List',
            draggable: false,
            id: 'src'
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
});

</script>

<div id="tree-div"></div>

此行dataUrl: 'tree/data'将POST请求发送到第二个控制器的方法。它返回json数组。最后，树上插入了数据:)每个人都很高兴：）

我希望它对某人有所帮助，因为我花了很多时间来解决这个问题。

享受你的工作:)

如何使用Spring MVC Controller中的数据填充ExtJS树？

1 个答案: