Being Smart With CSS Classes and ExtJS 4

Posted by Peter Kellner on August 29, 2013 · 6 mins read

 

Inspiration

Tuesday this week, Roland Schütz presented at the ExtJS San Francisco Meetup Group Bancha. Unfortunately (for everyone else) we did not have good attendance which gave me a bunch of time to talk with Roland (or better I should say for Roland to teach me stuff about ExtJS and the web in general).  It was fun to learn so much from someone half my age and twice as smart.  Meanwhile, while I was showing Roland my latest problem, he noticed I was showing and hiding elements by changing XTemplates.  He pointed out how inefficient that is and showed me a better way with CSS.  I have always known this is possible, but until now did not have the specifics for how to achieve it.  In this article, I’ll show you what Roland showed me.

 

The Problem

Let’s imagine we want to build an app (Sencha ExtJS in this case) that allows to show rows of data from a database, but easily toggle hiding some of the data.  Say it was a security app where we do now want to show security data.  For our example, we are just going to make it toggle by pressing a button but in the real world, this gets pretty involved.

[wp-js-fiddle url="http://jsfiddle.net/pkellner99/qr2BJ/10428/" style="width:100%; height:400px; border:solid #4173A0 1px;"]

A less correct way to do this would be create an XTemplate with an if clause in it, then based on the value of some button state or checkbox change what is showing from the store to be blank or the value.  This would cause a bunch of javascript to be run.  In this example, it would be fast so there would be no issue but in most cases, not optimal.

The Strategy

The basic strategy is this. You create two CSS classes as follows:

<style TYPE="text/css">
       .adminsection {
          display: none;
        }
        .show-adminsection .adminsection {
            display: inline;
        }
 </style>

 

You create a html structure as follows:

<div class="show-adminsection">
    <p>Do not hide this</p><br />
    <span class="adminSection">Hide THIS!!!</span
&lt;/div>

 

Then, in your JavaScript, you simply add and remove the class show-adminsection and the Hide THIS! will come and go!

You can see this in it’s full detail list a list view in the code below as well as the JS Fiddle Project shown above (hopefully, it’s my first fiddle).

Basically, when you press the button to hide or show, one DOM element has a class inserted or deleted to it.  That’s it!

HTH’s!

The Code

Ext.Loader.setConfig({ enabled: true, disableCaching: true });
Ext.application({
    name: 'TestApp',
    launch: function () {

        var store = Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['name',
                'seniority', 'department', 'clearance'],
            data: {
                'employees': [
                    {
                        "name": "Richard Nixon", "seniority": 7,
                        "department": "Management",
                        "clearance": "low"
                    },
                    {
                        "name": "Jimmy Carter",
                        "seniority": 2, "department": "Sales",
                        "clearance": "hight"
                    },
                    {
                        "name": "Ronald Reagan", "seniority": 3,
                        "department": "Sales", "clearance": "medium"
                    },
                    {
                        "name": "George Washington", "seniority": 4,
                        "department": "Accounting", "clearance": "medium"
                    },
                    {
                        "name": "George Bush", "seniority": 5,
                        "department": "Accounting", "clearance": "none"
                    }
                ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'employees'
                }
            }
        });

        var tpl1 = new Ext.XTemplate(
            '<tpl for=".">',
                '{name} {seniority}<br/>',
                '<span class="adminsection">{clearance}</span><br/>',
                '<hr/>',
            '</tpl>'
        );

        var view = Ext.create('Ext.view.View', {
            region: 'center',
            title: 'Employees',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            tpl: tpl1,
        });

        new Ext.Viewport({
            items: [
                    {
                        xtype: 'button',
                        text: 'Show Admin Section',
                        region: 'north',
                        handler: function (button) {
                            var panel = button.up();
                            panel.addCls("show-adminsection");
                        },
                    },
            {
                xtype: 'button',
                text: 'Hide Admin Section',
                region: 'north',
                handler: function (button) {
                    var panel = button.up();
                    panel.removeCls("show-adminsection");
                }
            }, view
            ],
            layout: 'border'
        });

    }
});