javascript - Tree node with expandable property set to true and no children does not render plus icon -
tree node expandable property set true , no children not render expand/collapse icon.
i need develop tree control loads sub-nodes on demand only. in other words, children should loaded on node expand event. i've found property 'expandable' set true supposed render expand/collapse icon regardless of whether children exist or not. please review code , point out made mistake 'expand/collapse icon' rendered nodes children.
tree store , model declared follow:
ext.define('entity', { extend: 'ext.data.model', fields: [ {name: 'name', type: 'string'}, {name: 'description', type: 'string'}, {name: 'clazz', type: 'string'}, {name: 'path;', type: 'string'}, {name: 'leaf', type: 'boolean'}, {name: 'expandable',type: 'boolean'}, {name: 'allowchildren', type: 'boolean'} ] }); var mpsstore = ext.create('ext.data.treestore', { model: 'entity', proxy: { type: 'ajax', url: 'companytree' } ,root: { name: '__root__' } }); ext.define('app.view.navigation', { extend: 'ext.tree.panel', alias : 'widget.navigation', title: '...', rootvisible: false, lines: false, usearrows: true, store: mpsstore ,columns: [{xtype: 'treecolumn', text: 'business entity', width: 150, dataindex: 'name', },{ text: 'description', dataindex: 'description' } ] }); response json looks like:
{ "path":".", "id":"__root__", "name":"__root__", "user":null, "description":null, "clazz":null, "iconcls":null, "leaf":false, "expanded":true, "expandable":true, "allowchildren":true, "children":[ { "path":".\\1", "id":"1", "name":"company 1", "user":null, "description":null, "clazz":"companyviewid", "iconcls":"icon-organisation", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ ] }, { "path":".\\2", "id":"2", "name":"company 2", "user":null, "description":null, "clazz":"companyviewid", "iconcls":"icon-organisation", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ { "path":".\\2\\3", "id":"3", "name":"billto 2.1", "user":null, "description":"2.1. street ave, unit 2.1", "clazz":"billtoviewid", "iconcls":"icon-billto", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ { "path":".\\2\\3\\4", "id":"4", "name":"shipto 2.1.1", "user":null, "description":"2.1. street ave, unit 2.1", "clazz":"shiptoviewid", "iconcls":"icon-shipto", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ { "path":".\\2\\3\\4\\5", "id":"5", "name":"machine2.1.1.1", "user":null, "description":"manufacturer, model", "clazz":"machineviewid", "iconcls":"icon-machine", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ ] } ] }, { "path":".\\2\\3\\6", "id":"6", "name":"shipto 2.1.2", "user":null, "description":"2.1. street ave, unit 2.1", "clazz":"shiptoviewid", "iconcls":"icon-shipto", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ ] } ] } ] }, { "path":".\\7", "id":"7", "name":"company 3", "user":null, "description":null, "clazz":"companyviewid", "iconcls":"icon-organisation", "leaf":false, "expanded":false, "expandable":true, "allowchildren":true, "children":[ ] } ] } the result looks like
as can see 1 'company' node has expand/collapse icon.
i've found 1 advice similar question treepanel expand/collapse on node without children extjs use css hack issue, have no clue insert style.
thank in advance.
just need 'end of story'.
if rely on spring , jackson render json in response , want skip empty children, can configure mappingjackson2httpmessageconverter in yourapp-servlet.xml so.
<mvc:annotation-driven> <mvc:message-converters> <beans:bean class="org.springframework.http.converter.json.mappingjackson2httpmessageconverter"> <beans:property name="objectmapper" ref="objectmapper"/> </beans:bean> </mvc:message-converters> </mvc:annotation-driven> <beans:bean name="objectmapper" class="org.springframework.http.converter.json.jackson2objectmapperfactorybean" autowire="no"> <beans:property name="dateformat"> <beans:bean class="java.text.simpledateformat"> <beans:constructor-arg type="java.lang.string" value="yyyy-mm-dd hh:mm:ss"/> </beans:bean> </beans:property> <beans:property name="featurestodisable"> <beans:list> <beans:value type="com.fasterxml.jackson.databind.serializationfeature">write_empty_json_arrays</beans:value> </beans:list> </beans:property> </beans:bean> regards.
you providing children data nodes, extjs assume node loaded.
remove "children":[] lazy nodes, , query made load them on demand.
then server must return data provided node. instance if try expand node "company 1", query should : http://localhost/?node=1
also if node doesn't have children, should set leaf true.
as side note, reduce amount of data transiting, many of parameters (expandable, allowchildren, ...) can use or default value, , should skipped.
Comments
Post a Comment