Top Support Tips

Scrolling a Component Into View

by Seth Lemmons

A somewhat common question from customers is how to scroll a component, within a scrollable container, into view. And not only into view, but to the top of the parent container. Let’s look at this example to see how it can be done:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var ct = Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            width: 200,
            height: 400,
            margin: 20,
            scrollable: true,
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                height: 150,
                xtype: 'button'
            },
            // Button 4 is far enough down the list of child items that it will
            // not be in view until scrolled into view
            items: [{
                text: 'Button 1'
            }, {
                text: 'Button 2'
            }, {
                text: 'Button 3'
            }, {
                text: 'Button 4'
            }, {
                text: 'Button 5'
            }, {
                text: 'Button 6'
            }],
            tbar: [{
                text: 'Scroll to Button 4',
                handler: function () {
                    // first, we'll fetch a reference to the target button
                    var target = ct.down('[text=Button 4]'),
                        // then we can get its offsetTop property
                        offset = target.getEl().dom.offsetTop;

                    // finally, we can pass the offsetTop value to the Y param
                    // of the owning panel's scrollTo method
                    // .. along with an animation config for added effect
                    ct.scrollTo(null, offset, {
                        duration: 250,
                        easing: 'ease-out'
                    });
                }
            }]
        });
    }
});

In this example, an Ext Panel is created and assigned to variable ‘ct’. We want to scroll Button 4, so it’s resting comfortably at the top of the scrollable Panel body. We can do that by adding some logic to a Button in a top-docked Toolbar of the Panel, but really that logic could be anywhere. We just need to get a reference to the target component we want to scroll into view as well as its containing parent.

We already have a reference to the scrollable container, in this case, as we’ve assigned the Panel instance to ‘ct’ when we created it. To get a reference to our target button, we use a component query with the target Button’s text:

var target = ct.down('[text=Button 4]');

Next, we get a reference to the Button’s wrapping element using target.getEl(). With that, we have access to the ‘dom’ property itself and then its offsetTop property. The offsetTop property is what we were hunting for because it tells us how far down from the top of the scrollable parent container our target component is.

offset = target.getEl().dom.offsetTop;

We’ll pass that value to the owning Panel’s scrollTo method as the ‘y’ param. To inject a little animation flourish, we can also pass in an animation object that instructs the scroll operation to animate within 250 milliseconds with an easing effect.

ct.scrollTo(null, offset, {
       duration: 250,
       easing: 'ease-out'
});

You can modify and run the example live using this fiddle.

Customizing A Tree List Component

by Alex Volfson

The treelist is a nice lightweight widget that is useful in many situations. Being a widget, it’s not easy to customize and doesn’t have a templating feature built in. That being said, it is possible to completely customize the treelist user interface as long as you understand which methods are responsible for drawing each section.

For this example, I’m going to add more functionality to the treelist by adding more icons to each leaf node. In addition, I’ll make each node bold that has children by adding a CSS class. The main method where you need to make changes is called getItemConfig.

Here, you can add a rowCls or change the xtype of each child based on any condition from your data:

Ext.define("customTreeList", {
    extend: "Ext.list.Tree",
    getItemConfig: function (node, parent) {

        var item =  Ext.apply({
            parentItem: parent.isRootListItem ? null : parent,
            owner: this,
            node: node,
            indent: this.getIndent()
        }, this.getDefaults());

        if(node.isLeaf()===true){
            item.xtype="customtreeitem";
        }else{
            node.data.rowCls="bolden"
        }
        return item

    }
});

Customtreeitem is where I’ll add the additional icons within the updateText method:

Ext.define('customTreeItem', {
    extend: 'Ext.list.TreeItem',
    xtype:"customtreeitem",
    updateText: function (text) {
        this.textElement.update(text+"<span class='x-fa fa-bell treeIcon'></span><span class='x-fa fa-user treeIcon'></span>");
    }
});

Now that you have the icons, you can interrogate the event object from onitemclick to see which icon was clicked and prevent selection, if needed.

You can see a fully functional example in this fiddle.

Take a look at the original methods to understand how I customized each one:

• Ext.List.Tree
• Ext.List.TreeItem