Results 1 to 3 of 3

Thread: Display tree model in custom view

  1. #1

    Default Display tree model in custom view

    Hi!

    I have got the work of making a layout editor.
    I have got data like this:
    Code:
    {
        text: "column_15", leaf: false, children:
        [
            {
                text: "column_05", leaf: false, children:
                [
                    {text: "menu", leaf: true},
                    {text: "search", leaf: true}
                ]
            },
            {
                text: "column_10", leaf: false, children:
                [
                    {text: "news", leaf: true}
                ]
            }
        ]
    }
    , and at first step I have to display it like so:
    HTML Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id="title">Layout Editor</title>
        <body>
            <style>
                .layout-container
                {
                    width: 500px;
                    height: 500px;
                    padding: 15px;
                    background-color: lightblue;
                    text-align: center;
                }
            
                .column-container
                {
                    border: 1px solid black;
                    float: left;
                    margin: 2px;
                    padding: 5px;
                }
                
                .column-15
                {
                    width: 490px;
                }
                
                .column-10
                {
                    width: 300px;
                }
                
                .column-05
                {
                    width: 150px;
                }
                
                .column-label
                {
                
                }
                
                .column-children
                {
                    
                }
                
                .block-container
                {
                    border: 1px solid black;
                    margin: 2px;
                    padding: 5px;
                }
                
                .block-label
                {
                
                }
            </style>
            <div id="layout-container" class="layout-container">
                <div class="column-container column-15">
                    <a class="column-label" href="javascript:" >column_15</a>
                    <div class="column-children">
                            <div class="column-container column-10">
                                <a class="column-label" href="javascript:" >column_10</a>
                                <div class="column-children">
                                        <div class="block-container">
                                            <a class="block-label" href="javascript:" >menu</a>
                                        </div>
                                        <div class="block-container">
                                            <a href="javascript:" >search</a>
                                        </div>
                                </div>
                            </div>
                            <div class="column-container column-05">
                                <a class="column-label" href="javascript:" >column_05</a>
                                <div class="column-children">
                                        <div class="block-container">
                                            <a class="block-label" href="javascript:" >news</a>
                                        </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </body>
    </html>
    example.jpg


    I am newbie in extjs, I was thinking about it, and in my opinion this is the way it should be done:
    I load the data into TreeNodes, and I display them with custom uiProviders. The ColumnNodeUI will render column layout and the LeafNodeUI will render simple box with text.
    I wrote this part the simplest way I know: I modified the JSON with the uiProvider attribute:
    Code:
    [
        {
            text: "column_15", leaf: false, uiProvider: "column", children:
            [
                {
                    text: "column_05", leaf: false, uiProvider: "column", children:
                    [
                        {text: "menu", leaf: true, uiProvider: "leaf"},
                        {text: "search", leaf: true, uiProvider: "leaf"}
                    ]
                },
                {
                    text: "column_10", leaf: false, uiProvider: "column", children:
                    [
                        {text: "news", leaf: true, uiProvider: "leaf"}
                    ]
                }
            ]
        }
    ]
    A made a html for trying this out:
    HTML Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id="title">Layout Editor</title>
            <link rel="stylesheet" type="text/css" href="http://localhost/layout/extjs/resources/css/ext-all.css" />
            <script type="text/javascript" src="http://localhost/layout/extjs/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="http://localhost/layout/extjs/ext-all.js"></script>
            <script type="text/javascript">Ext.BLANK_IMAGE_URL = "http://localhost/layout/extjs/resources/images/default/s.gif";</script>
            <script type="text/javascript">
            
            var sizeFactor=150;
            
            Ext.ns("Ext.le");
            Ext.le.RootNodeUI=Ext.tree.RootTreeNodeUI;
            Ext.le.ColumnNodeUI=Ext.tree.TreeNodeUI;
            Ext.le.LeafNodeUI=Ext.tree.TreeNodeUI;
            
            Ext.onReady(function ()
            {
                new Ext.tree.TreePanel(
                {
                    renderTo: "layout-container",
                    root: new Ext.tree.AsyncTreeNode(
                    {
                        text: "",
                        uiProvider: Ext.le.RootNodeUI,
                        expanded: true
                    }),
                    rootVisible: false,
                    loader: new Ext.tree.TreeLoader(
                    {
                        dataUrl: "test.json",
                        baseAttrs:
                        {
                            expanded: true
                        },
                        uiProviders:
                        {
                            column: Ext.le.ColumnNodeUI,
                            leaf: Ext.le.LeafNodeUI
                        }
                    })
                });
            });
            </script>
        </head>
        <body>
            <div id="layout-container" style="margin-top: 50px; margin-left: 50px;"></div>
        </body>
    </html>
    My question is: how to modify the ColumnNodeUI and the LeafNodeUI to display the nodes like in the first html?
    I tried to overwrite ColumnNodeUI.renderElements, to render column layout but it's too complicated for me. :S Can anybody help?

  2. #2

    Default

    I tried to extend the TreeNodeUI, and I can display nodes in this view, but it's a really hard thing... The Ext.data.Tree and Ext.data.Node classes are nice, but the Ext.tree package is really a mess. :S It's tight coupled, and its writer didn't understand what MVC means... I'll write a bug report, and an extension for managing trees.

  3. #3

    Default

    I'm ready with my extension, you can download it from here: https://github.com/inf3rno/Ext.ux.tree. Please send me a message if you find any bugs (I didn't develop it with TDD...).

Similar Threads

  1. set list view selection model
    By reecegwt in forum Ext GWT: Discussion
    Replies: 5
    Last Post: 18 Jan 2010, 1:55 PM
  2. Tree view display problem
    By lianzi2000 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 14 Nov 2008, 11:35 AM
  3. Ext objects for model-view-control paradign
    By mxu in forum Community Discussion
    Replies: 1
    Last Post: 26 Oct 2007, 1:31 AM
  4. Grid thumbnail view flowing left to right (custom view) ?
    By marvinhorst in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 20 Apr 2007, 7:00 PM
  5. View with JSON data model is not displaying
    By anilcj in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 27 Dec 2006, 9:44 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •