Question

我正在使用ExtJS 4.1。我有一个TreePanel，我绑定到两个TreeStore之一。重新绑定商店并展开折叠节点后，记录变得重复并且我看到错误Uncaught TypeError: Cannot read property 'internalId' of undefined

另一个问题是，我只能绑定一次存储。当我第二次调用treePanel.setRootNode（）时，不管我是否扩展节点，它都无法正常工作。

看看这个fiddle

代码如下：

var sportsStore = Ext.create('Ext.data.TreeStore', {
  root: {
    expanded: true,
    id: 133,
    children: [{
        text: "Audi",
        id: 1,
        leaf: true
      },
      {
        text: "sports cars",
        expanded: true,
        id: 2,
        children: [{
            id: 3,
            text: "Porsche",
            leaf: true
          },
          {
            text: "Mustang",
            id: 4,
            leaf: true
          }
        ]
      },
      {
        text: "Jaguar",
        id: 5,
        leaf: true
      }
    ]
  }
});


var carStore = Ext.create('Ext.data.TreeStore', {
  root: {
    expanded: true,
    id: 1444,
    children: [{
        id: 6,
        text: "Toyota",
        leaf: true
      },
      {
        text: "cars",
        id: 7,
        expanded: true,
        children: [{
            id: 8,
            text: "honda",
            leaf: true
          },
          {
            text: "Nissan",
            id: 9,
            leaf: true
          }
        ]
      },
      {
        text: "Kia",
        id: 10,
        leaf: true
      }
    ]
  }
});



Ext.create('Ext.panel.Panel', {
  title: 'Car Simple Tree',
  width: 300,
  height: 450,

  renderTo: Ext.getBody(),

  items: [{
      xtype: 'button',
      text: 'sports',
      handler: function() {
        alert('You clicked the sports button!');
        var t = Ext.getCmp('tp');

        t.setRootNode(sportsStore.getRootNode());
      }
    },

    {
      xtype: 'button',
      text: 'car',
      handler: function() {
        alert('You clicked the car button!');
        var t = Ext.getCmp('tp');

        t.setRootNode(carStore.getRootNode());
      }
    },
    {

      xtype: 'treepanel',
      id: 'tp',
      store: sportsStore,
      rootVisible: false,
      lines: true
    }
  ]


});

Answer 1

就记录而言，您仅通过调用setStore()并将所需的存储作为参数传递就可以在6.0中的一行中解决问题？

Here is a demo of this working in 6.0。

我花了很多时间玩这个游戏，尽管我的Sencha有点生锈（过去曾经是大粉丝），但我还是设法使它工作了。

现在它可能不是您想要的，但它确实可以满足您的需求……您可以更改商店以及进行扩展/折叠工作等。trick是我在每家商店上动态地重新创建树更改并将商店设置为该新树的默认商店。 decommissioned树已被Ext.destroy等删除。

Here is that Ext 4.1 working example in Fiddle

以下是供您参考的代码：

Ext.define('Thing', {
  extend: 'Ext.data.Model',
  fields: [{
    name: 'id',
    type: 'int'
  }, {
    name: 'text',
    type: 'string'
  }]
});

var sportsStore = Ext.create('Ext.data.TreeStore', {
  model: 'Thing',
  storeId: 'sportsStore',
  clearOnLoad: true,
  root: {
    expanded: true,
    id: 133,
    children: [{
      text: "Audi",
      id: 1,
      leaf: true
    }, {
      text: "sports cars",
      expanded: true,
      id: 2,
      children: [{
        id: 3,
        text: "Porsche",
        leaf: true
      }, {
        text: "Mustang",
        id: 4,
        leaf: true
      }]
    }, {
      text: "Jaguar",
      id: 5,
      leaf: true
    }]
  }
});
var carStore = Ext.create('Ext.data.TreeStore', {
  model: 'Thing',
  storeId: 'carStore',
  clearOnLoad: true,
  root: {
    expanded: true,
    id: 1444,
    children: [{
      id: 6,
      text: "Toyota",
      leaf: true
    }, {
      text: "cars",
      id: 7,
      expanded: true,
      children: [{
        id: 8,
        text: "honda",
        leaf: true
      }, {
        text: "Nissan",
        id: 9,
        leaf: true
      }]
    }, {
      text: "Kia",
      id: 10,
      leaf: true
    }]
  }
});
// This function does the magic by removing/then destroying the old tree and 
// adding the newly created one with default new store setup
function setupTree(storeName) {
  var pnl = Ext.getCmp('pnl');
  var treePanel = Ext.getCmp('tp')
  if (treePanel) {
    pnl.remove(treePanel)
    Ext.destroy(treePanel)
  }
  pnl.add(new Ext.create('Ext.tree.Panel', {
    id: 'tp',
    autoRender: true,
    rootVisible: false,
    store: storeName,
    animate: false,
    lines: true
  }))
}

Ext.create('Ext.panel.Panel', {
  id: 'pnl',
  title: 'Car Simple Tree',
  width: 300,
  height: 450,
  renderTo: Ext.getBody('#canvas'),
  items: [{
    xtype: 'button',
    text: 'sports',
    handler: function() {
      setupTree('sportsStore')
    }
  }, {
    xtype: 'button',
    text: 'car',
    handler: function() {
      setupTree('carStore')
    }
  }],
  listeners: {
    afterrender: function(self) {
      setupTree('sportsStore')
    }
  }
});

我还向存储中添加了ids，并为存储定义了model，以使其更接近best practices等。

进行此操作的是setupTree函数，该函数会查找具有特定ID的树（如果找到了该树，则cleans it，然后使用默认存储创建一个新树，我们单击该树）。

希望这会有所帮助。

Answer 2

我建议采用以下方法，这可能是一种解决方法，但ExtJS 4.1版本在{ "query": { "regexp": { "name": ".*m.*" } } }方法中存在一些问题：

定义一个空的树存储（UpdateIndexes()）并将其绑定到树面板
每次单击按钮时，用适当商店中的数据填充此空商店。

代码：

baseStore

注意：

正在工作的小提琴here。

ExtJS 4.1 treepanel-展开treepanel会导致记录重复

2 个答案: