Как заполнить ExtJS Tree данными из Spring MVC Controller?

Question

Как новичок в ExtJS, я пытаюсь использовать его с Spring MVC Controller.Итак, моя структура следующая: tree.jsp получает данные JSON из SomeController.java.Я использую 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 в проекте. Итак, в файл с плитками (templates.xml) я добавил следующую плитку:

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

Контроллер, который по поручению обработки запросов по URL http://<ip:port>/<web-app>/tree имеет два метода:

Этот метод возвращает представление jsp:

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

Следующий метод возвращает данные 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. Наконец, дерево заполнено данными :) Все счастливы:)

Надеюсь, это кому-нибудь поможет, потому что я потратил много времени, чтобы прийти к этому решению.

Приятной работы :)