ExtJS: Das Sortieren einer Spalte in einem TreePanel ändert die Reihenfolge der Datensätze der Knoten, nicht nur Blätter

Question

Ich habe es geschafft, ein Trepanel zu implementieren und alles scheint zu funktionieren. Ich habe Daten so (siehe unten). Meine Felder I "Name", die unter Dinge wie "ItemA", "ProductA" die Knoten und die "Iron", die ein Blatt ist und eine Eigenschaft namens "Verfügbar", die wahr/falsch ist (Boolean aber als String dargestellt) .

Wenn ich auf die Sortierspalte für den Booleschen Wert klicke, sortiere ich sie, sortiere sie dann aber als Ganzes. ich würde nur die Booleans in jeder Gruppe sortieren wollen. Momentan sortiert es sie als eine Gruppe von Items, wie es scheint. SO ändern die Knoten unter ItemB die Reihenfolge, nicht nur die Reihenfolge der booleschen Spalte. Ich hoffe das macht Sinn.

Ich habe die Spalte Modell auf diesen gesetzt

 sortType: Ext.data.SortTypes.asUCString 

Ich habe auch die Eigenschaft „folderSort“ zwischen wahr und falsch in der treepanel versucht zu ändern, aber es macht keinen Unterschied.

Irgendwelche Ideen?

Hier ist ein Beispiel meiner Daten, um es besser zu visualisieren und zu visualisieren.

ItemA 
    ProductA 
     Iron  true 

ItemB 
    Product123 
     House  true 
     Garage  false 
     Misc  false 
    Product1443 
     HouseF  true 
     NewItem  false 

Answer 1

Wie ich von Ihrer Frage verstehe, können Sie nicht nur die Blätter anstelle von Knoten sortieren. Sie können also Ihre Blatt- und Knotenmodelle angeben und dann die Eigenschaft "available" auf leafs setzen. Bitte überprüfen Sie diese Geige: https://fiddle.sencha.com/#fiddle/upv

Wenn dies nicht das ist, was Sie suchen oder es ist nicht möglich, ändern Sie Ihr Modell, ändern Sie bitte die Geige und fügen Sie Ihr Trepanel mit seinem Modell. Ich hoffe es hilft.

Ext.define('model.ItemsRoot', { 
    extend: 'Ext.data.TreeModel', 
    childType: 'model.Items', 
    fields: [{ 
     name: 'text', 
     mapping: 'name' 
    },{ 
     name: 'Available', 
     type: 'boolean' 
    }] 
}); 
Ext.define('model.Items', { 
    extend: 'Ext.data.TreeModel', 
    childType: 'model.Products', 
    fields: [{ 
     name: 'text', 
     mapping: 'name' 
    }] 
}); 
Ext.define('model.Products', { 
    extend: 'Ext.data.TreeModel', 
    childType: 'model.ItemNames', 
    fields: [{ 
     name: 'text', 
     mapping: 'name' 
    }] 
}); 
Ext.define('model.ItemNames', { 
    extend: 'Ext.data.TreeModel', 
    fields: [{ 
     name: 'text', 
     mapping: 'name' 
    }] 
}); 
var treeStore = Ext.create('Ext.data.TreeStore', { 
    model: 'model.ItemsRoot', 
    root: { 
     text: '', 
     expanded: true, 
     children: [{ 
      name: "Item A", 
      expanded: true, 
      children: [{ 
       name: "Product A", 
       expanded: true, 
       children: [{ 
        name: "Iron", 
        leaf: true, 
        Available: true 
       }] 
      }] 
     }, { 
      name: "Item B", 
      expanded: true, 
      children: [{ 
       name: "Product B", 
       expanded: true, 
       children: [{ 
        name: "House", 
        Available: false, 
        leaf: true 
       }, { 
        name: "Garage", 
        leaf: true, 
        Available: true 
       }, { 
        name: "Misc", 
        leaf: true, 
        Available: false 
       }] 
      }, { 
       name: "Product C", 
       expanded: true, 
       children: [{ 
        name: "House F", 
        leaf: true, 
        Available: true 
       }, { 
        name: "New Item", 
        leaf: true, 
        Available: false 
       }] 
      }] 
     }] 
    } 
}); 
var treePanel = Ext.create('Ext.tree.Panel', { 
    store: treeStore, 
    rootVisible: false, 
    columns: [{ 
     xtype: 'treecolumn', //this is so we know which column will show the tree 
     text: 'Items', 
     flex: 2, 
     sortable: true, 
     dataIndex: 'name' 
    }, { 
     //xtype: 'checkcolumn', 
     header: 'Available', 
     dataIndex: 'Available', 
     //stopSelection: false, 
     //menuDisabled: true, 
     editor: { 
      xtype: 'checkbox',  
     } 
    }], 
    renderTo: Ext.getBody() 
});