1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    coastal is on a distinguished road

      0  

    Default Thumb on slider won't move full left, but does after a node move..

    Thumb on slider won't move full left, but does after a node move..


    I'm using the geoext opacity slider [http://trac.geoext.org/browser/core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js] which extends Ext.slider.SingleSlider.

    The sliders appear for each layer in an OpenLayers Map. Each slider controls the opacity of the associated layer.

    As it stands the panel for the sliders is initially hidden. When expanded the sliders' thumbs can not be dragged fully to the left. The min value is reached but there's about 3-4 pixels remaining of each slider. When the nodes are rearranged the sliders' thumbs do move correctly to the end point of each slider. I've compared before and after the rearrangement of nodes and can not see a difference in their state. I'd appreciate any help on this..

    Code:
        var ActiveLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());    
        
        OSInspire.ActiveLayersPanel = Ext.extend(Ext.tree.TreePanel, {
            applyStandardNodeOpts: function (opts, layer) {
                if (opts.component) {
                    opts.component.layer = layer;
                }
                opts.layerId = layer.id;
            },
            initComponent: function () {
                var self = this;
                var options = {
                    id: "osinspire-activelayers",
                    border: false,
                    title: ('<b>Active Layers</b>'),
                    autoScroll: true,
                    enableDD: true,
                    plugins: [{
                        ptype: "gx_treenodecomponent"
                    }],
                    root: {
                        nodeType: "gx_layercontainer",
                        text: ('Layers'),
                        loader: {
                            applyLoader: false,
                            baseAttrs: {
                                uiProvider: ActiveLayerNodeUI,                        
                                iconCls: 'gx-activelayer-drag-icon'
                            },
                            createNode: function (attr) {
                                return self.createNode(self, attr);
                            },
                            filter: function (record) {
                                if (record.getLayer().name == "Search Criteria")
                                {
                                    return false;
                                }
                                if (record.getLayer().isBaseLayer == true)
                                {
                                    return false;
                                }
                                return record.getLayer().getVisibility();
                            }
                        }
                    },
                    rootVisible: false,
                    lines: false
                };
                Ext.apply(this, options);
                OSInspire.ActiveLayersPanel.superclass.initComponent.call(this);
                this.addListener("afterrender", this.onAfterRender);
                // this.addListener("expand", this.expand);
            },
            createNode: function (self, attr) {
                if (self.hropts) {
                    Ext.apply(attr, self.hropts);
                    self.applyStandardNodeOpts(attr, attr.layer);
                }
                attr.uiProvider = ActiveLayerNodeUI;
                attr.nodeType = "osinspire_activelayer";
                attr.iconCls = 'gx-activelayer-drag-icon'; //'gx-activelayer-drag-icon'; // gx-tree-layer-icon
                attr.checked = null;
                //attr.draggable = false;
                return GeoExt.tree.LayerLoader.prototype.createNode.call(self, attr);
            },
            onAfterRender: function () {
                var self = this;
                var map = mapPanel.map;
                map.events.register('changelayer', null, function (evt) {
                    var layer = evt.layer;
                    var rootNode = self.getRootNode();
                    var layerNode = rootNode.findChild('layerId', evt.layer.id);
                    if (evt.property === "visibility") {
                        if (evt.layer.getVisibility() && !layerNode) {
                            var newNode = self.createNode(self, {
                                layer: layer
                            });
                            var topLayer;
                            if (rootNode.firstChild) {
                                topLayer = rootNode.firstChild.layer;
                            }
                            rootNode.insertBefore(newNode, rootNode.firstChild);
                            if (topLayer) {
                                map.setLayerIndex(newNode.layer, map.getLayerIndex(topLayer) + 1);
                            }
                        } else if (!evt.layer.getVisibility() && layerNode) {
                            layerNode.un("move", self.onChildMove, self);
                            layerNode.remove();
                        }
                    }
                });
            }
            // expand: function () {
                // // need to examine all child nodes of root and if any are slider components
                // // Ext.getCmp('mySlider').syncThumb();
                // console.log("activelayerspanel: expand");
            // }
        });
        Ext.reg('osinspire_activelayerspanel', OSInspire.ActiveLayersPanel);  
    
    ...
    
        // Define the ActiveLayersPanel
        var activeLayersPanel = new OSInspire.ActiveLayersPanel({
            
            title: '<b>Active Layers</b>'
            ,collapsible: true
            ,width: 358
            ,border: false
            ,bodyStyle: "padding:10px"
            ,autoScroll: true
            //,hideMode: 'offsets'
            ,hropts: {
                /** Defines the custom component added under the standard layer node. */
                component : {
                    xtype: "gx_opacityslider",
                    showTitle: false,
                    plugins: new GeoExt.LayerOpacitySliderTip({
                        template: "Opacity: {opacity}%"}),
                    width: 160,
                    inverse: false,
                    aggressive: true,
                    style: {
                        marginLeft: '18px' 
                    }
                    //,value: 75
                    ,listeners: {
                        'dragend': function(component, e) {
                            console.log("dragend");
                            //console.log("dragend, getValue:" + component.getValue());
                            var sliderVal = component.layer.opacity * 100;
                            component.setValue(sliderVal);
                            //console.log("dragend, getValue after set:" + component.getValue());
                        }
                    }
                }
            }
            ,listeners: {
                'expand': function(tree){
                    // sliders need re-sync when panel is expanded
                    console.log("expand: syncing");
                    Ext.each(tree.getRootNode().childNodes, function(node)
                    {
                        if (node.component)
                        {
                            node.component.setValue(node.attributes.layer.opacity * 100);
                            //console.log("node name/value:" + node.text + "/" + node.component.getValue());
                            //var restoreValues = new Array(node.component.getValue());
                            var arrValues = new Array(75);
                            //arrValues[0] = 75;
                            node.component.values = arrValues;
                            node.component.halfThumb = 0;
                            //node.component.setMinValue = 0;
                            //node.component.syncSize();    
                            //delete node.component.vertical;
                            node.component.syncThumb();
                        }
                    });                
                },
                'movenode': function(tree, node, oldParent, newParent, index){
                    console.log("movenode: no syncing");
                    // sliders need re-sync when panel is expanded
                    // Ext.each(tree.getRootNode().childNodes, function(node)
                    // {
                        // if (node.component) {
                            // node.component.setValue(node.attributes.layer.opacity * 100);
                            // //console.log("node name/value:" + node.text + "/" + node.component.getValue());
                            // var restoreValues = new Array(node.component.getValue());
                            // node.component.values = restoreValues;
                            // node.component.syncThumb();
                        // }
                    // });    
                                
                                
                                
                    // console.log("node name:" + node.text);
                    // var sliderVal = node.attributes.layer.opacity * 100;
                    // console.log("layer.opacity: " + sliderVal + "%");
                    // //node.component.setValue(node.attributes.layer.opacity * 100);
                    // //node.component.reset();
                    // node.component.setValue(sliderVal);
                    // console.log("node.component.value:" + node.component.getValue());
                    // node.component.syncThumb();                
                    // console.log("node.component.value:" + node.component.getValue());        
    
                    // could try values (the array)
                },
                'afterrender': function(tree){
                    console.log("afterrender: no syncing");
                    // Ext.each(tree.getRootNode().childNodes, function(node)
                    // {
                        // if (node.component)
                        // {
                            // node.component.syncThumb();                    
                            // //console.log("syncThumb");
                            // //console.log("node name/value:" + node.text + "/" + node.component.getValue());                    
                        // }
                    // });    
                },
                'enddrag': function(tree, node, e){
                    console.log("enddrag: no syncing");
                    // Ext.each(tree.getRootNode().childNodes, function(node)
                    // {
                        // if (node.component)
                        // {
                            // node.component.syncThumb();
                            // //console.log("syncThumb");                        
                            // //console.log("node name/value:" + node.text + "/" + node.component.getValue());                    
                        // }
                    // });    
                },
                'insert': function(tree, parent, node, refNode){
                    console.log("insert: no syncing");
                    // Ext.each(tree.root.childNodes, function(node)
                    // {
                        // if (node.component)
                        // {
                            // //node.component.syncthumb();
                            // //console.log("insert rem node.component.syncthumb()");                        
                            // //console.log("node name/attributes.component.value:" + node.text + "/" + node.attributes.component.value);                    
                            
                            // node.component.setValue(node.attributes.layer.opacity * 100);
                            // //console.log("node name/value:" + node.text + "/" + node.component.getValue());
                            // //var restoreValues = new Array(node.component.getValue());
                            // var arrValues = new Array(75);
                            // //arrValues[0] = 75;
                            // node.component.values = arrValues;
                            // node.component.halfThumb = 0;                        
                            // //node.component.syncSize();    
                            // //delete node.component.vertical;
                            // node.component.syncThumb();                        
                            // console.log("insert: syncing using node.component");
                            
                        // } else {
                            // if (node.attributes.component)
                            // {
                                // console.log("insert: no syncing using node.attributes.component");
                                // //console.log("insert no syncthumb()");                        
                                // //node.attributes.component.syncthumb();
                                // //console.log("node name/attributes.component.value:" + node.text + "/" + node.attributes.component.value);                                            
                            // }
                        // }
                    // });                
                },
                'load': function(node){
                    console.log("load: no syncing");                
                    // if (node.component)
                    // {
                        // //node.component.syncThumb();
                        // //console.log("insert node.component.syncThumb()");                        
                        // //console.log("node name/attributes.component.value:" + node.text + "/" + node.attributes.component.value);                    
                    // } else {
                        // if (node.attributes.component)
                        // {
                            // //console.log("insert node.attributes.component.syncThumb()");                
                            // //node.attributes.component.syncThumb();
                            // //console.log("node name/attributes.component.value:" + node.text + "/" + node.attributes.component.value);                                            
                        // }
                    // }
                },
                'show': function(tree){
                    console.log("show: no syncing");
                    // Ext.each(tree.getRootNode().childNodes, function(node)
                    // {
                        // //node.component.syncThumb();
                        // //console.log("syncThumb");                    
                        // //console.log("node name/attributes.component.value:" + node.text + "/" + node.attributes.component.value);                    
                    // });        
                }
            }
        });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Do you see this behavior with just Ext.slider.SingleSlider?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    coastal is on a distinguished road

      0  

    Default


    Thanks for replying Mitchell,

    Yes, the problem occurs with a ext.slider.singleslider as well. In the attached example the slider is in a panel tucked into an accordian layout. When the slider's panel is expanded by the user the slider's thumb won't reach the full left extent of the slider. If the panel is the first panel in the layout then no problem occurs.

    The attached example contains three panels - the layer tree using the geoext.layoutopacityslider and two ext.slider.singleslider panels. One calls the syncThumb on render, the other doesn't. While the syncThumb restores the thumb to the slider's value neither allows the thumb to extend fully left.
    Attached Files

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    coastal is on a distinguished road

      0  

    Default


    bump

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    coastal is on a distinguished road

      0  

    Default


    bump

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    coastal is on a distinguished road

      0  

    Default bump

    bump


    bump

Thread Participants: 1