ExtJS: Bir TreePanel içindeki bir sütunun sıralanması düğümlerin kayıtlarının sırasını değiştirir, sadece

Question

yapraklarını çizmez Bir treepanel uygulamayı başarabildim ve her şey çalışıyor gibi görünüyor. Bende böyle bir veri var (aşağıya bakınız). Alanlarım "ItemA", "ProductA" ve "Yaprak" ve "Mevcut" olarak adlandırılan bir özellik olan "Available" (gerçek/false (boole, ancak bir dize olarak gösterilir) adı verilen şeylerin altında bulunan "ad" ı .

Boolean için sıralama sütununu tıklattığınızda bunları sıralarım, sonra tümüyle sıralar. yani, sadece her gruptaki boole'ları sıralamak istiyorum. Şu anda onları göründüğü öğeler grubu olarak sıralar. SO, yalnızca boolean sütununun sırasını değil, ItemB değişim sırasının altındaki düğümlerdir. Umarım bu mantıklı gelir.

ben de treepanel doğru ve yanlış arasındaki "folderSort" özelliğini değiştirerek denedim bu

 sortType: Ext.data.SortTypes.asUCString 

ayarlı kolon modeli var ama hiç fark etmez.

Herhangi bir fikrin var mı?

Verilerimi daha iyi denemek ve görselleştirmek için bir örnek.

ItemA 
    ProductA 
     Iron  true 

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

Answer 1

Sorunuzdan da anlaşılacağı gibi, yaprakları yalnızca düğümler yerine sıralayamazsınız. Böylece, yaprak ve düğüm modellerinizi belirtebilir ve ardından "kullanılabilir" özelliğini yapraklar. Lütfen şu krikoya bakın: https://fiddle.sencha.com/#fiddle/upv

Aradığınız şey bu değilse veya treepanel modelinizi değiştirmek mümkün değilse, lütfen klavyeyi değiştirin ve treepanel'ini modeliyle birlikte ekleyin. Umarım yardımcı olur.

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() 
});