Hybrid View

  1. #1
    Ext User
    Join Date
    Sep 2009
    Posts
    2
    Vote Rating
    0
    xnd is on a distinguished road

      0  

    Default ColumnTree with column button that triggers an event

    ColumnTree with column button that triggers an event


    Hi,

    I'm fairly new to Ext so nevermind any naive mistakes

    As you can see on the attached pic, I have a ColumnTree with two columns. Double clicking the node launches an ExtWindow allowing the user to edit the node and then reloads the tree.
    The column on the right has an image which also launches the ExtWindow, but in this case creates a new node under the one that was clicked and then also reloads the tree.

    My problem:
    I can't come up with a solution for the Create button.

    I tried using an <img> which invokes a javascript function, but then I can't manipulate my tree object.
    Also thought of an Ext button on each cell but I don't know if it's doable.

    Any solution is welcome

    Here's my code.


    Listdimensionalvalues.jsp
    Code:
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
    <link rel="stylesheet" type="text/css" href="${JS_DIR}/ext/resources/css/column-tree.css" />
    <link rel="stylesheet" type="text/css" href="${JS_DIR}/ext/resources/css/CustomToolbar.css" />
    <link rel="stylesheet" type="text/css" href="${JS_DIR}/ext/resources/css/ColumnNodeUI.css" />
    <script type="text/javascript" src="${JS_DIR}/ext/ExtContentIPDMS/ColumnNodeUI.js"></script>
    <script type="text/javascript" src="${JS_DIR}/ext/ExtContentIPDMS/Window_Iframe.js"></script>
    
    <script type="text/javascript">
    
    
    
    Ext.onReady(function(){
    
    
        var treeLoader =new Ext.tree.TreeLoader({        
            dataUrl: '${pageContext.request.contextPath}/ajaxListDimensionalValueNode.do2',
            uiProviders :{
                        'col': Ext.tree.ColumnNodeUI}
                });
        
        var tree = new Ext.tree.ColumnTree({
            renderTo:'tree-div',
            title    : 'Dimensional Values',
            height: 300,
            width: 400,
            useArrows:true,
            autoScroll:true,
            animate:true,
            enableDD:true,
            containerScroll: true,
            rootVisible: true,
            root: {
                nodeType: 'async',
                text: 'Values'
            },
            columns    : [{
                        header    :'Edit',
                    width     :290
                    },{
                    header    :'Create',
                    width     :100                                                     
                    }],
                        
           
            loader: treeLoader
            
        });
    
        
        tree.on('dblclick' ,function(node){
                var action = "${pageContext.request.contextPath}/ajaxEditDimensionalValue.do2";
                action += "?method=prepare";
                action += "&nodeIndex="+node.id;
                action += "&hasChilds="+node.isLeaf();
                if(node.parentNode!=null)
                    action += "&parentIndex="+node.parentNode.id;
                action += "&window=winchoose";
    
                winValorDim = ExtWindow('Valor Dimensional',
                        action,
                        '',
                        'html',
                        200, //width
                        200     //height
                        );
    
                winValorDim.on('close', function( p ) { 
                    tree.root.reload();
                       });
                   
                winValorDim.show();
                
            }
        });
    
        
        tree.getRootNode().expand(true);
    
        
    });
    
    
    </script>
    <br/><br/><br/>
    <div id="tree-div"></div>
    ListDimensionalValueNode.jsp
    Code:
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
    [
    <c:forEach items="${elements}" varStatus="i" var="elemento">
    {
        text       : "${element.description}",
        id         : "index-${i.index}",
        expanded   : false,
        img           : {
                           xtype    :'img',                                                                       
                           name     : "val",
                           src        : "${pageContext.request.contextPath}/images/icon/icon-add.png",
                           href        : "${pageContext.request.contextPath}/ajaxEditDimensionalValue.do2?method=prepare" //Not being used
                     },
        uiProvider :'col'
        }
     <c:if test="${!i.last}">,</c:if>
    </c:forEach>
    ]
    Code:
    /*!
     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.ns('Ext.ux.tree');
    
    /**
     * @class Ext.ux.tree.ColumnTree
     * @extends Ext.tree.TreePanel
     * 
     * @xtype columntree
     */
    Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
        lines:false,
        borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
        cls:'x-column-tree',
          
        onRender : function(){
            Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);        
             this.headers = this.header.createChild({cls:'x-tree-headers'});
            
            var cols = this.columns, c;
            var totalWidth = 0;
            var scrollOffset = 19; // similar to Ext.grid.GridView default
    
            for(var i = 0, len = cols.length; i < len; i++){
                 c = cols[i];
                 totalWidth += c.width;
                 this.headers.createChild({
                     cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
                     cn: {
                         cls:'x-tree-hd-text',
                         html: c.header
                     },
                     style:'width:'+(c.width-this.borderWidth)+'px;'
                 });
            }
            this.headers.createChild({cls:'x-clear'});
            // prevent floats from wrapping when clipped
            this.headers.setWidth(totalWidth+scrollOffset);
            this.innerCt.setWidth(totalWidth);
        }
    });
    
    Ext.reg('columntree', Ext.ux.tree.ColumnTree);
    
    //backwards compatibility
    Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
    
    
    /**
     * @class Ext.ux.tree.ColumnNodeUI
     * @extends Ext.tree.TreeNodeUI
     */
    Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
        focus: Ext.emptyFn, // prevent odd scrolling behavior
        
        //evitar que segundo click expanda o no
       // onDblClick     : function(e){},
        renderElements : function(n, a, targetNode, bulkRender){
            this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
    
            var t = n.getOwnerTree();
            var cols = t.columns;
            var bw = t.borderWidth;
            var c = cols[0];
            var cb = typeof a.checkbox == 'object';
            var im = typeof a.img == 'object';
                    
           //change the "varbuf =" line to create the kind of markup that we want to see in your node. 
            var buf = [
                 '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
                    '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
                        '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
                        '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
                        '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
                        '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
                        a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
                        '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
                    "</div>"];
             for(var i = 1, len = cols.length; i < len; i++){
                 c = cols[i];
    
                 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
                         '<div class="x-tree-col-text" align="center">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),
                         cb ? ('<input class="x-tree-node-cb" type="checkbox"' + (a.checkbox.name ? ' name="' + a.checkbox.name + '"' : "name=asd ") + (a.checkbox.value ? ' value="' + a.checkbox.value + '"' : "") + (a.checkbox.id ? ' id="' + a.checkbox.id + '"' : "") + (a.checkbox.checked ? ' checked="checked"' : "") + ' />') : '',
                             im ? ('<img src="' + a.img.src +'" onclick="alert(12345);"/>') : '',
                                 "</div>",
                       "</div>");
             }
             buf.push(
                '<div class="x-clear"></div></div>',
                '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                "</li>");
    
            if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
                                    n.nextSibling.ui.getEl(), buf.join(""));
            }else{
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
            }
    
            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1];
            var cs = this.elNode.firstChild.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.iconNode = cs[2];
            var index = 3;
            if(cb){
                this.checkbox = cs[3];
                
                this.checkbox.defaultChecked = this.checkbox.checked;            
                index++;
            }
            this.anchor = cs[index];
            this.textNode = cs[3].firstChild;
        }
    });
    //backwards compatibility
    Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
    Thanks.
    Attached Images

  2. #2
    Ext User
    Join Date
    Sep 2009
    Posts
    2
    Vote Rating
    0
    xnd is on a distinguished road

      0  

    Default Problem solved

    Problem solved


    Well, I guess I faced the problem as being complex and forgot to try the simple solutions.

    Just had to define the javascript function used on the img outside of Ext.onReady() as well as the tree.

    Thanks anyway.

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