繁体   English   中英

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

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

可扩展属性设置为true并且没有子级的树节点不会呈现扩展/折叠图标。

我需要开发仅按需加载子节点的树控件。 换句话说,应在子节点展开事件上加载子级。 我发现,将属性“ expandable”设置为true时,无论是否存在子代,都应该呈现扩展/折叠图标。 您能否检查一下我的代码并指出我错误地认为“展开/折叠图标”仅针对具有子节点的渲染。

具有存储和模型的树声明如下:

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

结果看起来像

没有子节点的树,没有展开/折叠图标

如您所见,只有一个“公司”节点具有展开/折叠图标。

对于类似的问题,我只找到了一个建议, 在没有子级Extjs的节点上Treepanel展开/折叠,后者使用css破解了问题,但不知道在哪里插入此样式。

先感谢您。

仅针对那些需要“故事终结”的人。

如果您依靠spring和jackson来呈现json作为响应,并且想跳过空子级,则可以在yourApp-servlet.xml中配置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>

问候。

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

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

然后,您的服务器必须返回提供的节点的数据。 例如,如果您尝试扩展节点“ Company 1”,则查询应类似于: http:// localhost /?node = 1

另外,如果您的节点没有任何子节点,则应将leaf设置为true

附带说明,为减少数据传输量,您的许多参数(expandable,allowChildren等)都可以使用或为默认值,应将其跳过。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM