Latest Ext JS 7.8 is now available. Learn more

Top Support Tips

May 30, 2017 107 Views
Show

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:

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More

<!--

coming soon

Something Awesome Is

COMING SOON!
-->

<!--

[gravityform id="31" title="true" description="true" field_values="order_type=other"]
-->