可扩展属性设置为 true 且没有 children 的树节点不呈现加号图标

Question

可扩展属性设置为 true 且没有 children 的树节点不会呈现 expand/collapse 图标。

我需要开发仅按需加载 sub-nodes 的树控件。换句话说，children 应该在节点展开事件上加载。我发现属性 'expandable' 设置为 true 应该呈现 expand/collapse 图标，无论 children 是否存在。您能否查看我的代码并指出我在哪里犯了错误，即 'expand/collapse icon' 仅针对具有 children.

的节点呈现

商店和模型声明如下的树：

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'
            }
    ]
});

响应 json 看起来像：

{  
   "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":[  ]
      }
   ]
}

结果看起来像

如您所见，只有一个 'company' 节点具有 expand/collapse 图标。

我只找到一个类似问题的建议 Treepanel expand/collapse on a node without children Extjs 它使用 css 解决问题，但不知道在哪里插入这种样式。

提前致谢。

只为有需要的人'end of story'。

如果依赖spring和jackson渲染json响应，想跳空children，可以在yourApp-servlet.[=59中配置MappingJackson2HttpMessageConverter =] 这样做。

<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>

此致。

Answer 1

您正在为节点提供子数据，因此 ExtJS 假定节点已加载。

为您的惰性节点删除 "children":[]，将进行查询以按需加载它们。

那么您的服务器必须 return 所提供节点的数据。例如，如果您尝试扩展节点 "Company 1"，查询应该如下所示： http://localhost/?node=1

此外，如果您的节点没有任何子节点，您应该将 leaf 设置为 true。

附带说明一下，为了减少数据传输量，您的许多参数（expandable、allowChildren 等）可以使用或是默认值，应该跳过。

可扩展属性设置为 true 且没有 children 的树节点不呈现加号图标

Tree node with expandable property set to true and no children does not render plus icon

javascript

extjs

tree

extjs4.2

可扩展 属性 设置为 true 且没有 children 的树节点不呈现加号图标

Tree node with expandable property set to true and no children does not render plus icon

javascript

extjs

tree

extjs4.2

可扩展属性设置为 true 且没有 children 的树节点不呈现加号图标