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

tree no expand/collapse icon nodes without children

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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more