Skip to content

December 23, 2015

Creating a simple fancy HTML list inside a ExtJs Panel

by Joe Kuan

In this blog, we explore how we can quickly assemble a HTML list within a ExtJs Panel. First we use Sencha Cmd to create a simple app  (See this for tutorial). Below is our first approach to launch the app:

Ext.application({
    name: 'Demo',

    extend: 'Demo.Application',

    // autoCreateViewport: 'Demo.view.main.Main'

    launch: function() {
        var win = Ext.create('Ext.window.Window', {
            title: 'Demo',
            width: 500,
            height: 350,            
            html: '<div id="welcome">Welcome to the iTrinegy Demo</div><div id="home_logo"></div><div id="status_list"></div>',
            bodyPadding: '20 15 15 15'
        }).show();
    }
});

We assign the window content using the html option with three DIV elements. The DIV layout is pretty standard: one for the welcome message, one for the logo and one for the list. The final layout should look something like this:
Drawing

Lets add some CSS style layout and decorate ‘welcome’ and ‘home_logos’ DIVs first:

#welcome {
    float: left;
    width: calc(100% - 180px);
    font-size: 28px;
    font-weight: bold;
    line-height: 150%;
    color: #818181;
    font-family: Arial,sans;
}  
#home_logo{
    background-image: url(/DemoExtJs/images/logo.png);
    background-size: 100% !important;
    background-repeat: no-repeat;
    min-width: 180px;
    min-height: 63px;
    position: relative;
    top: 0px;
    float: right;
    right: 0px;
}
#status_list {
     width: 100%;
     height: 100%;
     float: left;
}

Basically, we set the two DIVs horizontal to each other. We fixate the ‘logo’ DIV to the image size (180×63) and display it as the background. Hence, the ‘welcome’ DIV will take the reset of the width depending on it’s container size. For the ‘status_list’ DIV, we reset layout to vertical flow and set the the size to fill the rest of the container space. We put the above CSS into a file, demo.css, and add the file into the CSS section in the app.json file.

    "css": [
        {
            "path": "bootstrap.css",
            "bootstrap": true
        }, {
            "path": "demo.css",
        }
    ],

Then we run sencha cmd to rebuild the bootstrap:

Joes-MacBook-Pro-2:DemoExtJs joe$ sencha app refresh
Sencha Cmd v5.1.2.52
[INF] Processing Build Descriptor : default
[INF] Loading app json manifest...
[INF] Appending content to /Users/joe/Sites/DemoExtJs/bootstrap.js
[INF] Writing content to /Users/joe/Sites/DemoExtJs/bootstrap.json

Here is our first attempt:

screen

Next task is to update the HTML list into the ‘status_list’ DIV. We use Ext.fly to capture the ‘status_list’ DIV and update the content with the HTML list (The reason for this approach because the content is dynamic in our product). Below is the updated code

Ext.application({
    name: 'Demo',
    extend: 'Demo.Application',

    // autoCreateViewport: 'Demo.view.main.Main'

    launch: function() {
        var win = Ext.create('Ext.window.Window', {
            . . . .
            bodyPadding: '20 15 15 15',
            listeners: {
                afterrender: function() {
                   var div = Ext.fly('status_list');
                   var htmlList = '<ul class="status">' + 
                       '<li>The INE is <span class="status_value">running</span></li>' + 
                       '<li><span class="status_value">1</span> user is logged in</li>' + 
                       '<li><span class="status_value">No</span> emulation is running</li>' + 
                        ..... +
                        '</ul>';

                   div.update(htmlList);
               }
            }   
        }).show();
    }
});

This is what look like with the HTML list:

screen

Note that inside the UL tag, we already embedded with ‘status’ and ‘status_value’ classes to improve the list style. So here are the final CSS settings:

.status li {
   list-style: none;
   background: url(/DemoExtJs/images/bullet.png) left center no-repeat;
   padding-left:20px;
   color: #6d6d6d;
   line-height: 150%;
}

.status_value {
   font-weight: bold;
   color: #418fe4;
}

We basically remove the default HTML list style and replace it with a custom bullet point image, bullet, and set the default text color and line spacing. For the dynamic status values, we use bold and different color to highlight the difference.

Here is the final output of the styled HTML list inside a ExtJs component:
screen

And here is the screenshot of the original product using this technique to display the status.
screen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: