1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    Ukraine/US
    Posts
    12
    Vote Rating
    0
    dpasichnik is on a distinguished road

      0  

    Default Editable Column Tree example

    Editable Column Tree example


    Hi,

    I looked for it some time ago on this forum and didn't find, so I wrote it.

    It allows create, modify, delete and save Tree nodes either in XML or JSON (here it just alerts the resulted tree)

    Basically, I modified existing ColumnTree and treeSerialiser code. I'm pretty new to EXTJS so if I done something wrong - please correct it.

    editable-column-tree.js

    Code:
    /*
     * Ext JS Library 2.0 RC 1
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    Ext.onReady(function(){
    	Ext.BLANK_IMAGE_URL = 'ext-2.0/resources/images/default/s.gif';
    		
        var tree = new Ext.tree.ColumnTree({
            el:'tree-ct',
            width:700,
            autoHeight:true,
            rootVisible:false,
            autoScroll:true,
    		expandable:false,
    		enableDD:true,
            title: 'Menu Configuration',
            tbar: [{
    				text:'Save Menu',
    				tooltip: 'Save Menu',
    				iconCls:'save-icon',
    				listeners: {
    					'click': function() {
    						var json = tree.toJsonString(null,
    							function(key, val) {
    								return (key == 'leaf' || key == 'id' || key =='menu_item'|| key == 'menu_url');
    							}, {
    								menu_item: 'text',
    								menu_url: 'href'
    							}
    						);
    						alert(json);
    					},
    					scope:this
    				}
    			},{
    				xtype:'tbseparator'
    			},{
    				text:'Add Folder Item',
    				tooltip: 'Add Folder Item',
    				iconCls:'folder-icon',
    				listeners: {
    					'click' : function(){
    						var selectedItem = tree.getSelectionModel().getSelectedNode();
    						if (!selectedItem) {
    							selectedItem = tree.getRootNode(); 
    						}
    					
    						handleCreate = function (btn, text, cBoxes){
    							if(btn == 'ok' && text) {
    								var newNode = new Ext.tree.TreeNode({
    										menu_item: text,
    										menu_url: '',
    										leaf: false,
    										expandable: true,
    										uiProvider: Ext.tree.ColumnNodeUI
    								});
    								if(selectedItem.isLeaf()) {
    									selectedItem.parentNode.insertBefore(newNode, selectedItem.nextSibling);
    								} else {
    									selectedItem.insertBefore(newNode, selectedItem.firstChild);
    								}
    							}
    						}
    						Ext.MessageBox.show({
    							title:'Add new Folder Item',
    							msg: 'Name of Folder Item:',
    							buttons: Ext.MessageBox.OKCANCEL,
    							prompt:true,
    							fn: handleCreate
    						});
    					}
    				}
    			},{
    				xtype:'tbseparator'
    			},{
    				text:'Add Page Item',
    				tooltip: 'Add Page Item',
    				iconCls:'page-icon',
    				listeners: {
    					'click' : function(){
    						var selectedItem = tree.getSelectionModel().getSelectedNode();
    						if (!selectedItem) {
    							Ext.Msg.alert('Warning', 'Please select an Item after which you want to add a new one.');
    							return false;
    						}
    					
    						handleCreate = function (btn, text, cBoxes){
    							if(btn == 'ok' && text) {
    								var newNode = new Ext.tree.TreeNode({
    										menu_item: text,
    										menu_url: '',
    										leaf: true,
    										allowChildren:false,
    										uiProvider: Ext.tree.ColumnNodeUI
    								});
    								if(selectedItem.isLeaf()) {
    									selectedItem.parentNode.insertBefore(newNode, selectedItem.nextSibling);
    								} else {
    									selectedItem.insertBefore(newNode, selectedItem.firstChild);
    								}
    							}
    						}
    						Ext.MessageBox.show({
    							title:'Add new Page Item',
    							msg: 'Name of Page Item:',
    							buttons: Ext.MessageBox.OKCANCEL,
    							prompt:true,
    							fn: handleCreate
    						});
    					}
    				}
    				
    			},{
    				xtype:'tbseparator'
    			},{
    				text:'Delete Item',
    				tooltip: 'Delete Item',
    				iconCls:'delete-icon',
    				listeners: {
    					'click' : function(){
    						var selectedItem = tree.getSelectionModel().getSelectedNode();
    						if (!selectedItem) {
    							Ext.Msg.alert('Warning', 'Please select an Item to delete.');
    							return false;
    						}
    					
    						handleDelete = function (btn){
    							if(btn == 'ok') {
    								selectedItem.remove();
    							}
    						}
    						Ext.MessageBox.show({
    							title:'Confirm your action',
    							msg: 'Are you sure you want to delete this item and its children?',
    							buttons: Ext.MessageBox.OKCANCEL,
    							fn: handleDelete
    						});
    					}
    				}
    			},{
    				xtype:'tbseparator'
    			}],
            columns:[{
                header:'Menu Item',
                width:300,
                dataIndex:'menu_item'
            },{
                header:'URL',
                width:398,
                dataIndex:'menu_url'
            }],
    
            loader: new Ext.tree.TreeLoader({
                preloadChildren:true,
                uiProviders:{
                    'col': Ext.tree.ColumnNodeUI
                }
            }),
    		
            root: new Ext.tree.AsyncTreeNode({
    				allowChildren: true,
    				children: [{
    				  menu_item: "Current State",
    				  menu_url: 'blah blah', 
    				  uiProvider:'col',
    				  children: [{
    					  menu_item: "Executive Summary",
    					  menu_url: 'blah blah', 
    					  uiProvider:'col',
    					  leaf:true
    				  },{
    					  menu_item: "Vulnerability Scorecard",
    					  menu_url: 'blah blah',
    					  uiProvider:'col',
    					  leaf:true
    				  },{
    					  menu_item: "Vulnerability Distribution",
    					  menu_url: 'blah blah',
    					  uiProvider:'col',
    					  leaf:true
    				  }]
    				},{
    					
    				  menu_item: "Trends",
    				  menu_url: 'blah blah',
    				  uiProvider:'col',
    				  children: [{
    					  menu_item: "Host Changes",
    					  menu_url: 'blah blah',
    					  uiProvider:'col',
    					  leaf:true
    				  },{
    					  menu_item: "Hosts and Vulnerability",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Application and Vulnerability",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Vulnerability by Operation System",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Vulnerability by Networks",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Vulnerability by Application Group",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  }]
    				},{
    					
    				  menu_item: "Technical",
    				  menu_url: 'blah blah',
    				  uiProvider:'col', 
    				  children: [{
    					  menu_item: "Risk Matrix",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Host Inventory",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Application Inventory",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Vulnerability Inventory",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Most Common Vulnerabilites",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Most Common SANS Vulnerabilities",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Most Vulnerable Applications",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "Most Vulnerable Hosts",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  },{
    					  menu_item: "PCI Compliance",
    					  menu_url: 'blah blah',
    					  uiProvider:'col', 
    					  leaf:true
    				  }]
    				}]
    			})
        });
        tree.render();
    	tree.expandAll();
    	 var te = new Ext.tree.ColumnTreeEditor(tree,{
                    completeOnEnter: true,
                    autosize: true,
                    ignoreNoChange: true
                });
    });
    ColumnNodeUI.js

    Code:
    /*
     * Ext JS Library 2.0 RC 1
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    Ext.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',
    	collapsible: false,
        
        onRender : function(){
            Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
            this.headers = this.body.createChild(
                {cls:'x-tree-headers'},this.innerCt.dom);
    
            var cols = this.columns, c;
            var totalWidth = 0;
    
            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);
            this.innerCt.setWidth(totalWidth);
        }
    });
    
    
    Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
        focus: Ext.emptyFn, // prevent odd scrolling behavior
    
        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];
    		
    		n.cols = new Array();
    		
    		var text = n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]);
    		n.cols[cols[0].dataIndex] = text;
    
            var buf = [
                 '<li class="x-tree-node" unselectable="on"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'" unselectable="on">',
                    '<div class="x-tree-col" style="width:',c.width-bw,'px;" unselectable="on">',
                        '<span class="x-tree-node-indent" unselectable="on">',this.indentMarkup,"</span>",
                        '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" unselectable="on">',
                        '<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+'"' : "", ' unselectable="on">',
                        '<span unselectable="on">', text,"</span></a>",
                    "</div>"];
             for(var i = 1, len = cols.length; i < len; i++){
                 c = cols[i];
    			 var text = (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]);
    			 n.cols[cols[i].dataIndex] = text;
                 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;" unselectable="on">',
                            '<div class="x-tree-col-text" unselectable="on">',text,"</div>",
                          "</div>");
             }
             buf.push(
                '<div class="x-clear" unselectable="on"></div></div>',
                '<ul class="x-tree-node-ct" style="display:none;" unselectable="on"></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];
            this.anchor = cs[3];
            this.textNode = cs[3].firstChild;
        }
    });
    Ext.tree.ColumnTreeEditor = function(tree, config){
        config = config || {};
        var field = config.events ? config : new Ext.form.TextField(config);
        Ext.tree.TreeEditor.superclass.constructor.call(this, field);
    
        this.tree = tree;
    
        if(!tree.rendered){
            tree.on('render', this.initEditor, this);
        }else{
            this.initEditor(tree);
        }
    };
    
    Ext.extend(Ext.tree.ColumnTreeEditor, Ext.Editor, {
        
        alignment: "l-l",
        autoSize: false,
        
        hideEl : false,
        
        cls: "x-small-editor x-tree-editor",
        
        shim:false,
        shadow:"frame",
        
        maxWidth: 250,
        
        editDelay: 0,
    
        initEditor : function(tree){
            tree.on('beforeclick', this.beforeNodeClick, this);
            this.on('complete', this.updateNode, this);
            this.on('beforestartedit', this.fitToTree, this);
            this.on('startedit', this.bindScroll, this, {delay:10});
            this.on('specialkey', this.onSpecialKey, this);
        },
    
            fitToTree : function(ed, el){
            var td = this.tree.getTreeEl().dom, nd = el.dom;
            if(td.scrollLeft >  nd.offsetLeft){             td.scrollLeft = nd.offsetLeft;
            }
            var w = Math.min(
                    this.maxWidth,
                    (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - 5);
            this.setSize(w, '');
        },
    
            triggerEdit : function(node, e){
            var obj = e.target;
    		if (Ext.select(".x-tree-node-anchor", false, obj).getCount() == 1) {
    			obj = Ext.select(".x-tree-node-anchor", false, obj).elements[0].firstChild;
    		} else if (obj.nodeName == 'SPAN' || obj.nodeName == 'DIV'){
    			obj = e.target;
    		} else {
    			return false;
    		}
    				
    		var colIndex = 0;
    		for (var i in node.cols) {
    			if (node.cols[i] == obj.innerHTML) {
    				colIndex = i;
    			}
    		}
    		this.completeEdit();
    		this.editNode = node;
    		this.editCol = obj;
    		this.editColIndex = colIndex;
    		this.startEdit(obj);
    		if (obj.nodeName == 'DIV') {
    			var width = obj.offsetWidth;
    			this.setSize(width);
    		}
        },
    
            bindScroll : function(){
            this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
        },
    
            beforeNodeClick : function(node, e){
            var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
            this.lastClick = new Date();
            if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
                e.stopEvent();
                this.triggerEdit(node, e);
                return false;
            } else {
    			this.completeEdit();
    		}
        },
    
            updateNode : function(ed, value){
            this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
            this.editNode.cols[this.editColIndex] = value; //for internal use only
    		this.editNode.attributes[this.editColIndex] = value;//duplicate into array of node attributes
    		this.editCol.innerHTML = value;
        },
    
            onHide : function(){
            Ext.tree.TreeEditor.superclass.onHide.call(this);
            if(this.editNode){
                this.editNode.ui.focus();
            }
        },
    
            onSpecialKey : function(field, e){
            var k = e.getKey();
            if(k == e.ESC){
                e.stopEvent();
                this.cancelEdit();
            }else if(k == e.ENTER && !e.hasModifier()){
                e.stopEvent();
                this.completeEdit();
            }
        }
    });
    editable-column-tree.html

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Menu Configuration</title>
    <link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
    
        <!-- GC -->
     	<!-- LIBS -->
     	<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
     	<!-- ENDLIBS -->
    
        <script type="text/javascript" src="ext-2.0/ext-all.js"></script>
    
        <script type="text/javascript" src="ColumnNodeUI.js"></script>
        <script type="text/javascript" src="editable-column-tree.js"></script>
    	<script type="text/javascript" src="treeSerializer.js"></script>
    
        <link rel="stylesheet" type="text/css" href="editable-column-tree.css" />
    </head>
    <body>
    <table border="0" width="100%" height="100%">
    	<tr>
    		<td align="center" valign="top" style="padding-top:25px;">
    		<div id="tree-ct" style="text-align:left"></div>
    		</td>
    	</tr>
    </table>
    
    </body>
    </html>
    editable-column-tree.css

    Code:
    /*
     * Ext JS Library 2.0 RC 1
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    .x-column-tree .x-tree-node {
        zoom:1;
    }
    .x-column-tree .x-tree-node-el {
        /*border-bottom:1px solid #eee; borders? */
        zoom:1;
    }
    .x-column-tree .x-tree-selected {
        background: #d9e8fb;
    }
    .x-column-tree  .x-tree-node a {
        line-height:18px;
        vertical-align:middle;
    }
    .x-column-tree  .x-tree-node a span{
    	
    }
    .x-column-tree  .x-tree-node .x-tree-selected a span{
    	background:transparent;
    	color:#000;
    }
    .x-tree-col {
        float:left;
        overflow:hidden;
        padding:0 1px;
        zoom:1;
    }
    
    .x-tree-col-text, .x-tree-hd-text {
        overflow:hidden;
        -o-text-overflow: ellipsis;
    	text-overflow: ellipsis;
        padding:3px 3px 3px 5px;
        white-space: nowrap;
    	height:1.2em;//height:20px;
        font:normal 11px arial, tahoma, helvetica, sans-serif;
    }
    .x-tree-hd-text {
    	height:1.3em;//height:20px;
    }
    
    .x-tree-headers {
        background: #f9f9f9 url(ext-2.0/resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
    	cursor:default;
        zoom:1;
    }
    
    .x-tree-hd {
        float:left;
        overflow:hidden;
        border-left:1px solid #eee;
        border-right:1px solid #d0d0d0;
    }
    
    .page-icon {
        background-image:url(images/leaf-add-icon.gif) !important;
    }
    .delete-icon {
        background-image:url(images/delete-icon.gif) !important;
    }
    .folder-icon {
        background-image:url(images/folder-add-icon.gif) !important;
    }
    .save-icon {
        background-image:url(images/save-icon.gif) !important;
    }
    treeSerializer.js

    Code:
    /* tostring.js */
    
    /**
     * Returns a string of Json that represents the tree
     * @param {Function} (optional) A function, which when passed the node, returns true or false to include
     * or exclude the node.
     * @param {Function} (optional) A function, which when passed an attribute name, and an attribute value,
     * returns true or false to include or exclude the attribute.
     * @return {String}
     */
    Ext.tree.TreePanel.prototype.toJsonString = function(nodeFilter, attributeFilter, attributeMapping){
          return this.getRootNode().toJsonString(nodeFilter, attributeFilter, attributeMapping);
    };
    
    /**
     * Returns a string of Json that represents the node
     * @param {Function} (optional) A function, which when passed the node, returns true or false to include
     * or exclude the node.
     * @param {Function} (optional) A function, which when passed an attribute name, and an attribute value,
     * returns true or false to include or exclude the attribute.
     * @return {String}
     */
    Ext.tree.TreeNode.prototype.toJsonString = function(nodeFilter, attributeFilter, attributeMapping){
    //	Exclude nodes based on caller-supplied filtering function
        if (nodeFilter && (nodeFilter(this) == false)) {
            return '';
        }
        var c = false, result = "{";
    
    //	Add the id attribute unless the attribute filter rejects it.
        if (!attributeFilter || attributeFilter("id", this.id)) {
            result += '"id:"' + this.id;
            c = true;
        }
    
    //	Add all user-added attributes unless rejected by the attributeFilter.
        for(var key in this.attributes) {
            if ((key != 'id') && (!attributeFilter || attributeFilter(key, this.attributes[key]))) {
    	        if (c) result += ',';
    			if (attributeMapping && attributeMapping[key]) {
    				thisKey = attributeMapping[key];
    			} else {
    				thisKey = key;
    			}
    	        result += '"' + thisKey + '":"' + this.attributes[key] + '"';
    	        c = true;
    	    }
        }
    
    //	Add child nodes if any
        var children = this.childNodes;
        var clen = children.length;
        if(clen != 0){
            if (c) result += ',';
            result += '"children":['
            for(var i = 0; i < clen; i++){
                if (i > 0) result += ',';
                result += children[i].toJsonString(nodeFilter, attributeFilter, attributeMapping);
            }
            result += ']';
        }
        return result + "}";
    };
    
    /**
     * Returns a string of XML that represents the tree
     * @param {Function} (optional) A function, which when passed the node, returns true or false to include
     * or exclude the node.
     * @param {Function} (optional) A function, which when passed an attribute name, and an attribute value,
     * returns true or false to include or exclude the attribute.
     * @return {String}
     */
    Ext.tree.TreePanel.prototype.toXmlString = function(nodeFilter, attributeFilter, attributeMapping){
    	return '\u003C?xml version="1.0"?>\u003Ctree>' +
    		this.getRootNode().toXmlString(nodeFilter, attributeFilter, attributeMapping) +
    		'\u003C/tree>';
    };
    
    /**
     * Returns a string of XML that represents the node
     * @param {Function} (optional) A function, which when passed the node, returns true or false to include
     * or exclude the node.
     * @param {Function} (optional) A function, which when passed an attribute name, and an attribute value,
     * returns true or false to include or exclude the attribute.
     * @return {String}
     */
    Ext.tree.TreeNode.prototype.toXmlString = function(nodeFilter, attributeFilter, attributeMapping){
    //	Exclude nodes based on caller-supplied filtering function
        if (nodeFilter && (nodeFilter(this) == false)) {
            return '';
        }
        var result = '\u003Cnode';
    
    //	Add the id attribute unless the attribute filter rejects it.
        if (!attributeFilter || attributeFilter("id", this.id)) {
            result += ' id="' + this.id + '"';
        }
    
    //	Add all user-added attributes unless rejected by the attributeFilter.
        for(var key in this.attributes) {
            if ((key != 'id') && (!attributeFilter || attributeFilter(key, this.attributes[key]))) {
    	        if (attributeMapping && attributeMapping[key]) {
    				thisKey = attributeMapping[key];
    			} else {
    				thisKey = key;
    			}
    			result += ' ' + thisKey + '="' + this.attributes[key] + '"';
    	    }
        }
    
    //	Add child nodes if any
        var children = this.childNodes;
        var clen = children.length;
        if(clen == 0){
            result += '/>';
        }else{
            result += '>';
            for(var i = 0; i < clen; i++){
                result += children[i].toXmlString(nodeFilter, attributeFilter, attributeMapping);
            }
            result += '\u003C/node>';
        }
        return result;
    };

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    Ukraine/US
    Posts
    12
    Vote Rating
    0
    dpasichnik is on a distinguished road

      0  

    Default Editable Column Tree screenshot

    Editable Column Tree screenshot


    Here is screenshot.
    Attached Images

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Location
    Ukraine/US
    Posts
    12
    Vote Rating
    0
    dpasichnik is on a distinguished road

      0  

    Default


    Does anybody know how to disable extpanding/collapsing of the tree? It's bothering me for this usecase..

  4. #4
    Ext User
    Join Date
    Jan 2008
    Posts
    2
    Vote Rating
    0
    tdv is on a distinguished road

      0  

    Default


    misprint found: (in ColumnNodeUI.js when you extending TreeEditor to ColumnTreeEditor)
    your code: Ext.extend(Ext.tree.ColumnTreeEditor, Ext.Editor, {
    should be: Ext.extend(Ext.tree.ColumnTreeEditor, Ext.tree.TreeEditor, {

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Location
    Ukraine/US
    Posts
    12
    Vote Rating
    0
    dpasichnik is on a distinguished road

      0  

    Default


    No, it's Editor, not TreeEditor

  6. #6

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    andrasz is on a distinguished road

      0  

    Default


    Thank you for this script, dpasichnik.
    How can you make some columns uneditable ?
    The "save" button doesn't work for me. I think it should display an js alert with the "json tree" in it. But nothing happens. Do you have an idea ?
    TIA
    andrasz

    Edit : concerning the "save" button, I can't make the alert() function work inside a listener function. Anyway I used a messageBox instead and the json tree is well displayed. I still have to send it to the server through AJAX.

    I still have not idea about making some columns not editable.
    Last edited by andrasz; 19 Mar 2008 at 9:28 AM. Reason: precisions

  8. #8
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    astorne is on a distinguished road

      0  

    Thumbs up


    Code:
    		var colIndex = 0;
    		for (var i in node.cols) {
    			if (node.cols[i] == obj.innerHTML) {
    				colIndex = i;
    			}
    		}
    these codes to verify which column is to be edited , but it return error column(the last column) when some columns have the same content( for example: blank string value)?
    Last edited by astorne; 20 Mar 2008 at 3:44 AM. Reason: will

  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    astorne is on a distinguished road

      0  

    Default


    Quote Originally Posted by andrasz View Post
    Thank you for this script, dpasichnik.
    How can you make some columns uneditable ?
    The "save" button doesn't work for me. I think it should display an js alert with the "json tree" in it. But nothing happens. Do you have an idea ?
    TIA
    andrasz

    Edit : concerning the "save" button, I can't make the alert() function work inside a listener function. Anyway I used a messageBox instead and the json tree is well displayed. I still have to send it to the server through AJAX.

    I still have not idea about making some columns not editable.
    if one column's value is "", the column is uneditable

  10. #10
    Ext User
    Join Date
    Mar 2008
    Posts
    89
    Vote Rating
    0
    Shaguar is on a distinguished road

      0  

    Default


    Where do i get the images from?
    (leaf-add-icon.gif)
    (delete-icon.gif)
    (folder-add-icon.gif)
    etc...

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi