1. #1
    Sencha User MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    493
    Vote Rating
    3
    MaximGB is on a distinguished road

      0  

    Default TreeGrid (Ext.ux.maximgb.tg) - a tree grid component based on Ext's native grid.

    TreeGrid (Ext.ux.maximgb.tg) - a tree grid component based on Ext's native grid.


    Hi.

    I've ported my tree grid extension to ExtJS 3.x, the tree grid is based on the Ext.grid.GridPanel and Ext.data.Store, so the most grid/store options are in place. I've also added per node paging and some UI enhancements. Any feedback and/or bug reports are highly appreciated.

    Description, demo and download page is here at
    http://max-bazhenov.com/dev/ux.maximgb.tg/index.html

    Changes from ExtJS 2.x version
    • No more breadcrumbs header, thought it might be added later as optional component.
    • Ext.ux.maximgb.tg.EditorGridPanel class added, so TreeGrid gained the cell editing feature as well.
    Use the force - read the source.
    My ExtJS extensions can be found here: http://max-bazhenov.com/dev/

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,649
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    Hi Maxim,

    great plugin!

    One thing looks odd to me, but maybe it's a general problem having row estender: when row is expanded and not selected, the hovering looks wrong. It takes row and part of the extender.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Ext User
    Join Date
    Aug 2009
    Posts
    2
    Vote Rating
    0
    sfs is on a distinguished road

      0  

    Question TreeGrid and extDirect

    TreeGrid and extDirect


    Hi Maxim

    Can the treegrid do dynamic loading e.g. using ext.Direct?

    I have big grid and I'm not to happy about the paging solution. Primarily because sorting only affects whatever page your on.

    Thanks in advance.

  4. #4
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default A few tips on TreeGrid (for new users)

    A few tips on TreeGrid (for new users)


    Tips for new users

    Hi,

    Having spent the last few days trying to get a hang of TreeGrid, I feel I should share some of what I've learnt for the benefit of new users who might come across this thread.

    I have found this parts of this thread being slightly outdated (posts from 2 years ago), and TreeGrid in general could use better documentation. Hopefully this will help others:

    Adjacency List vs. Nested Set Models

    TreeGrid offers two types of stores:
    • Adjacency List (AdjacencyListStore)
    • Nested Set (NestedSetStore)
    These models are, in principal, two SQL related strategies to represent hierarchy in databases.

    TreeGrid ships with two corresponding examples (examples/server_al & examples/server_ns), although no use of SQL is demonstrated in these examples.

    Adjacency List requires each record to contain the following fields:
    • ID
    • Parent ID
    • Is Leaf
    Nested Set requires - in addition to the fields above - the following fields:
    • Lft
    • Rgt
    • Level
    How Lft, Rgt, are calculated is explained below.

    Which one should I choose?

    Adjacency List is far more simple than the Nested Set model, as you don't have to calculate Lft and Rgt.

    One example where this is important is when you plan to add records dynamically to TreeGrid - if you are using NestedSetStore, you'd have to calculate Lft and Rgt; with AdjacencyListStore, you only need to know the parent id.

    So why would I choose Nested Set?

    The hierarchy logic in databases can be implemented either by SQL queries or by a server-side script. For example, in order to find the top parent of a node, programmers might use SQL only, or a hybrid between SQL and PHP.

    Nested Set makes life easier for those who implement the hierarchy logic via SQL queries. Then, if the database contains the lft and rgt fields anyway, you might just as well use the NestedSetStore with TreeGrid. If your database does not contain lft and rgt fields - you should probably use the AdjacencyListStore.

    How do I calculate Lft and Rgt?

    How Lft and Rgt are calculated is explained (alongside a thorough explanation of the two models) here: http://dev.mysql.com/tech-resources/...ical-data.html

    However, TreeGrid ships with Tree.php script that can calculate them for you.

    The following PHP script demonstrates how it is used:

    Code:
        $tree = new Tree();  
          
        $result = sql("SELECT * FROM nodes");
    
        while ($node = mysql_fetch_array($result)) 
        {
          $tree->add(array(
            'title' => $node['title'],     
            ), $node['parent_id']
          );
        }
        
        return $tree->getNodes();
    $tree->getNodes() will return the nodes with lft and rgt fields.

    So what options do I have?

    Option 1:
    • A Nested Set database (with lft and rgt fields per record).
    • NestedSetStore with TreeGrid
    This option is good for those who wish to implement the hierarchy logic using SQL.

    Option 2:
    • An Adjacency List database (records having ID and Parent ID)
    • Having Tree.php calculating lft and rgt
    • NestedSetStore with TreeGrid
    This option is good for those who wish to make life hard for themselves.

    Option 3:
    • An Adjacency List database
    • AdjacencyListStore with TreeGrid
    This option is good for those who wish to keep things simple, and don't mind implementing the hierarchy logic in PHP (or any other server-side script).

    Anything else I need to know?

    Be aware that the record definition varies with respect to your NestedSetStore/AdjacencyListStore choice.

    With NestedSetStore you need to have the fields starting with '_':

    Code:
        var record = Ext.data.Record.create([
               {name: 'company'},
             {name: 'price', type: 'float'},
             {name: 'change', type: 'float'},
             {name: 'pct_change', type: 'float'},
             {name: 'last_change', type: 'date', dateFormat: 'n/j h:ia'},
             {name: 'desc'},
             {name: '_id', type: 'int'},
             {name: '_level', type: 'int'},
             {name: '_lft', type: 'int'},
             {name: '_rgt', type: 'int'},
             {name: '_is_leaf', type: 'bool'}
           ]);
    With AdjacencyListStore you don't need the _level, _lft, and _rgt fields. In fact, having them can mess up the TreeGrid Display. So:

    Code:
        var record = Ext.data.Record.create([
               {name: 'company'},
             {name: 'price', type: 'float'},
             {name: 'change', type: 'float'},
             {name: 'pct_change', type: 'float'},
             {name: 'last_change', type: 'date', dateFormat: 'n/j h:ia'},
             {name: '_id', type: 'int'},
             {name: '_parent', type: 'auto'},
             {name: '_is_leaf', type: 'bool'}
           ]);
    Adding a Record Dynamically


    The following code is based on an earlier post in this thread:

    Code:
    function addItemChild() {
    
        // get selected record
        var r = grid.getSelectionModel().getSelected();
    
        // if it's a leaf that make it a non-leaf
        if (r.get("_is_leaf")) {
            r.set("_is_leaf", false);
        }
    
        childID = Ext.id();
        var myNewRecord = new record({company:"Child " + childID, price:12, _id:childID, _is_leaf:true, _parent:r.get("_id")}, childID);
        store.addSorted(myNewRecord);
    }
    A few notes on this:

    1) When using EditorGridPanel, I have found the need to replace this line:

    Code:
    var r = grid.getSelectionModel().getSelected();
    With:
    Code:
    row = grid.getSelectionModel().getSelectedCell()[0];
    r = store.getAt(row);
    2) Notice the use of:
    Code:
    new record({...}, id)
    Where record was defined earlier:

    Code:
    var record = Ext.data.Record.create([...]);
    This is instead of using:

    Code:
    new Ext.data.Record({...}, id);
    3) This example applies to AdjacencyListStore. If you want to add a record to a NestedSetStore, you'd need to provide _lft, _rgt and _level (most likely you'd have the server doing this, possible calculating these using the Tree helper class).

    4) I have found the need to include the following for the tree to update correctly (mainly with regards to the icons displayed next to the node):

    Code:
              store.addSorted(myNewRecord);
              // the two lines below are added so the grid updates correctly
              store.expandNode(r);          
              grid.getView().refresh();
    Using Direct with TreeGrid

    I got TreeGrid working with direct by replacing the following in treegrid.js:

    This:
    Code:
    Ext.ux.maximgb.tg.AbstractTreeStore = Ext.extend(Ext.data.Store,
    Has changed to this:

    Code:
    Ext.ux.maximgb.tg.AbstractTreeStore = Ext.extend(Ext.data.DirectStore,
    And then in my code:

    Code:
        var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
            autoLoad : true,
            directFn : nodes.get,
            reader: new Ext.data.JsonReader({id: '_id'}, record),
        });
    Hope this helps

  5. #5
    Ext User
    Join Date
    Aug 2009
    Posts
    2
    Vote Rating
    0
    sfs is on a distinguished road

      0  

    Default tips for new users

    tips for new users


    Hi Izhaki

    Great explanation - I have been through the same process as you

    I didn't try to use direct but finally figured out that if you don't fetch the entire tree to the treegrid, then when you expand a node which is not a leaf, the store will try to fetch the underlying nodes, by adding a parameter to you url called "anode" (Thank you Firebug!) which contains the id of the node you are trying to expand.

    Does anyone know the difference between the dynamic load which I have just descriped and what goes on when you use direct?

    /sfs

  6. #6
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    Does anyone know the difference between the dynamic load which I have just descriped and what goes on when you use direct?
    To my knowledge if you have a node that is not marked as a leaf (meaning it should have children) but has no children in the store, extjs will prompt the server for its children when the node is expanded. This is what you have described as dynamic load, and I think is also termed synchronous load.

    Direct is just a way to define server side classes that can be called directly from your javascript code. So for example, I can have a PHP class called Nodes, with a method called get_nodes(), and call it directly from javascript with Nodes.get_nodes(). This really ease the client/server protocol, and results in a more logical server-side code.

  7. #7
    Ext User
    Join Date
    Apr 2009
    Location
    Haifa, Israel
    Posts
    4
    Vote Rating
    0
    MasterAM is on a distinguished road

      0  

    Lightbulb Fix for an issue with the AdjacencyListStore

    Fix for an issue with the AdjacencyListStore


    Hi,

    I found an issue with AdjacencyListStore-based grids.
    You can easily reproduce it by modifying some of maxim's examples, like the client_editable example, as follows:

    (index.js)
    PHP Code:
     ...
       
    // create the data store
        
    var record Ext.data.Record.create([
             {
    name'company'},
             {
    name'price'type'float'},
             {
    name'change'type'float'},
             {
    name'pct_change'type'float'},
             {
    name'last_change'type'date'dateFormat'n/j h:ia'},
             {
    name'desc'},
             {
    name'_id'type'int'},
             {
    name'_parent'type'int'},
             {
    name'_is_leaf'type'bool'}
           ]);
        var 
    store = new Ext.ux.maximgb.tg.AdjacencyListStore({
    ... 
    If you extract a node, the correct children will be expanded, but in most cases they would be in the wrong position.

    The problem lies in the AdjacencyListStore's implementation of the getRootNodes method.
    In my case, the roots' '_parent' property was an empty string and not null, making the method return an empty array.

    Therefore, the following is proposed:
    (TreeGrid.js@line 929)
    PHP Code:
        getRootNodes : function()
        {
            var 
    i
                
    len
                
    result = [], 
                
    records this.data.getRange();
            
            for (
    0len records.lengthleni++) {
                if (
    isNaN(parseInt(records[i].get(this.parent_id_field_name)),10)) {
                    
    result.push(records[i]);
                }
            }
            
            return 
    result;
        }, 
    @MaximGB,
    Great extension!
    Perhaps some of the code can be refactored a bit so that it can compress better.
    I will apply a few changes as I go and post the changes when done.

    Cheers!
    Alon

  8. #8
    Sencha User MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    493
    Vote Rating
    3
    MaximGB is on a distinguished road

      0  

    Default


    Great extension!
    Perhaps some of the code can be refactored a bit so that it can compress better.
    I will apply a few changes as I go and post the changes when done.
    Thanks, but I prefer code readability over compressibility.
    Use the force - read the source.
    My ExtJS extensions can be found here: http://max-bazhenov.com/dev/

  9. #9
    Ext User
    Join Date
    Dec 2008
    Posts
    38
    Vote Rating
    0
    s.m.srinivas is on a distinguished road

      0  

    Question Problem What am I doing Wrong

    Problem What am I doing Wrong


    Hi,

    I had requirement to use Tree Grid & below is the code. I don't see records in the Grid, I would like to know what am i doing wrong

    Code:
    var fields = [
    	{name: 'acctClient'},
    	{name: 'account'},
    	{name: 'shortName'},
    	{name: 'forms'},
    	{name: 'doc'},
    	{name: 'desc'},
    	{name: 'revision'},
    	{name: 'scan'},
    	{name: 'statusDate'},
    	{name: 'frame'},
    	{name: 'loc'},
    	{name: 'status'},
    	{name: 'id', type: 'int'},
    	{name: 'parentid', type: 'int'},
    	{name: 'leaf', type: 'bool'}
    ];
    
    var data = [
    	{
    		"rows": [
    					{
    						"id":1,"parentid":null,"leaf":false,"acctClient":"","account":"","shortName":"","forms":"CL-SVC-SEL","doc":"","desc":"ACCOUNT SERVICES SELECTION","revision":"11-2005","scan":"03/15/2006","statusDate":"","frame":"SEZ","loc":"CMD","status":"Accepted"
    					},
    					{
    						"id":2,"parentid":1,"leaf":true,"acctClient":"","account":"","shortName":"","forms":"","doc":"DF","desc":"FDIC ADDENDUM FOR TRUST ACCTS","revision":"","scan":"","statusDate":"","frame":"","loc":"","status":""
    					}
    		],
    		"success":true,
    		"total":2
    	}
    ];
    
    var acctMaintStore = new Ext.ux.maximgb.tg.AdjacencyListStore({
    		autoLoad : true,
    		leaf_field_name: "leaf",
    		parent_id_field_name: "parentid",
    		reader: new Ext.data.JsonReader({
    				idProperty: 'id', 
    				root: 'rows',
    				fields: fields
    		}),
    		proxy: new Ext.data.MemoryProxy(data)
    });
    
    var resultPanel = new Ext.ux.maximgb.tg.GridPanel({
    	store: acctMaintStore,
    	enableHdMenu : false,
    	master_column_id : "forms",
    	disableSelection : true,
    	columns: [
    		{header: "Account/Client", hidden: true, width: 100, sortable: true, dataIndex: 'acctClient'},
    		{header: "Account", hidden: true, width: 100, sortable: true, dataIndex: 'account'},
    		{header: "Short Name (Friendly)", hidden: true, width: 150, sortable: true, dataIndex: 'shortName'},
    		{header: "Forms", width: 100, sortable: true, dataIndex: 'forms'},
    		{header: "Doc Cd", width: 125, sortable: true, dataIndex: 'doc'},
    		{header: "Description", width: 125, sortable: true, dataIndex: 'desc',id:'auto-expand-column-acct-maint'},
    		{header: "Revision", hidden: false, width: 125, sortable: true, dataIndex: 'revision'},
    		{header: "Scan", hidden: false, width: 125, sortable: true, dataIndex: 'scan'},
    		{header: "Status Date", width: 75, sortable: true, dataIndex: 'statusDate'},
    		{header: "Frame", hidden: false, width: 75, sortable: true, dataIndex: 'frame'},
    		{header: "Loc", hidden: false, width: 75, sortable: true, dataIndex: 'loc'},
    		{header: "Status", width: 75, sortable: true, dataIndex: 'status'},
    		{header: "Action", width: 150, sortable: false,dataIndex:'action'}
    	],
    	stripeRows: true,
    	autoExpandColumn: 'auto-expand-column-acct-maint',
    	region: 'center',
    	margins	: '0 0 0 0',
    	header : false,
    	border: false,
    	title:'Results Panel'
    });

  10. #10
    Ext User
    Join Date
    Dec 2008
    Posts
    38
    Vote Rating
    0
    s.m.srinivas is on a distinguished road

      0  

    Default


    I figured out the issue in the code

    Code:
    .............
    
    var resultPanel = new Ext.ux.maximgb.tg.GridPanel({
    	store: acctMaintStore,
    	enableHdMenu : false,
    	master_column_id : "forms",
    	disableSelection : true,
    	columns: [
    		{header: "Account/Client", hidden: true, width: 100, sortable: true, dataIndex: 'acctClient'},
    		{header: "Account", hidden: true, width: 100, sortable: true, dataIndex: 'account'},
    		{header: "Short Name (Friendly)", hidden: true, width: 150, sortable: true, dataIndex: 'shortName'},
    		{header: "Forms", width: 100, sortable: true, dataIndex: 'forms',id:'forms'},
    		{header: "Doc Cd", width: 125, sortable: true, dataIndex: 'doc'},
    		{header: "Description", width: 125, sortable: true, dataIndex: 'desc',id:'auto-expand-column-acct-maint'},
    		{header: "Revision", hidden: false, width: 125, sortable: true, dataIndex: 'revision'},
    		{header: "Scan", hidden: false, width: 125, sortable: true, dataIndex: 'scan'},
    		{header: "Status Date", width: 75, sortable: true, dataIndex: 'statusDate'},
    		{header: "Frame", hidden: false, width: 75, sortable: true, dataIndex: 'frame'},
    		{header: "Loc", hidden: false, width: 75, sortable: true, dataIndex: 'loc'},
    		{header: "Status", width: 75, sortable: true, dataIndex: 'status'},
    		{header: "Action", width: 150, sortable: false,dataIndex:'action'}
    	],
    	stripeRows: true,
    	autoExpandColumn: 'auto-expand-column-acct-maint',
    	region: 'center',
    	margins	: '0 0 0 0',
    	header : false,
    	border: false,
    	title:'Results Panel'
    });
    
    ...............
    The id marked in red was missing & hence the grid was not showing

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar