Saki's Blog

How to add an IP address to loopback interface on Mac

Saki — Sun, 21 Nov 2010 01:36:03 +0000

Create file /Library/LaunchDaemons/yourname.plist with the following content:

 version="1.0">
  >
    >Label>
      >Your Label>
    >ProgramArguments>
      >
        >/sbin/ifconfig>
        >lo0>
        >alias>
        >127.0.0.2>
        >netmask>
        >255.255.255.0>
      >
    >RunAtLoad>
      />
  >
>

and reboot the machine.

My thanks to all visitors of my blog

Saki — Mon, 04 Oct 2010 23:16:01 +0000

I would like to thank all visitors of my blog for ever increasing interest.

When I was creating the blog back in 2008 I thought it would be a good idea to have notes of my know-how I have learn while writing my Ext applications. Something to refer to so I do not need to reinvent the wheel over and over.

The next idea was to share this knowledge to make the life of other Ext developers easier.

Both ideas have proven to be successful; I myself have a pool of knowledge, tricks, patterns and good practices and the following graph shows that this pool is valuable also for you Ext fans and pros.

I will continue to maintain it and publish whatever valuable I run into.

Thank you once again.

Saki.

Ext Extension with Factory Functions File Pattern

Saki — Tue, 21 Sep 2010 00:01:43 +0000

I would like to say, Thank you!

Saki — Tue, 14 Sep 2010 09:50:37 +0000

Recently I’ve received very nice Private Message on Sencha Forums from Sosy and I’d like to share it with you (with the author’s permission). Here it is:

Hello Saki, i would like to say, thank you!

I am new to ExtJS, comming from the PHP/MySQL side (still loving it, but its different already now) (sounds familiar?).

Started for 3 weeks with ExtJS, didn’t like Javascript, cause to abstract for my eyes and head. Read a lot in this forum, started try and error, loaded a lot of examples, tried to figure out why what works and how.

And above all, i am using a lot of your scripts to learn, i love it how you did things.

Tomorrow i started reading about Extjs again (that is my start in the morning, coffee (my own, because i am an coffeeroaster, Firefox, google -> ExtJS) And then read anything what i can find about it.

Bought a book, (ExtJS cookbook, which sucks, nothing in it to use for me) and so on.

But the highlight of tomorrow, or even better, since i started with Ext, was in your blog, found under philosophy.

First of all the leading commata issue, men, Saki i almost had spoken some curses on you as i start to struggle with your code and saw the leading commata.

What i thought was, geee, it says Author: Ing. Jozef Sakalos, well only an Ing. can be this abstract, no wonder that he can programm in Ext.

Then (i only admit this to you, but more on that later) i started to reorder your scripts, remove the leading commata. (*shame*). But for me that was a good start to go through the code, the calls and so on.

Now it comes, why i want to say thank you!

Then i read your second post under philosophy, Changing viewpoint to Ext…

I started reading and, for the first time in 3 weeks i saw some light at the end of the tunnel, reading that you came from the PHP/MySQL side, and how you discriped the fact of what and how you assume it has to work, in reflect to Ext (exactly as how i see it) and on how it has to be.

This all together is changing my thoughts incredibly, even the leading commata thing, i still can believe that i will do that, because it looks really, really ugly for me, but i am also someone who can lay down old habits, if there are really good argumenst.

Thanks Saki, you gave me hope on keep programming in Ext and try to learn it.

Regards from an Dutch guy living in Germany,

Paul Willemsen aka Sosy.

Experience: Ext Component loading can be slow

Saki — Sun, 12 Sep 2010 21:35:40 +0000

This spring I was contacted by one company with the request of consulting on their application developed in PHP and ExtJS Javascript Library. They wanted to come on site, stay with them one week and advise. I usually take such jobs but I always want to know what product is expected so I know in advance if I can deliver it to the full satisfaction.

These guys succeeded to keep it covered and I was only told: “Come here and work with us for a week.” Being curious enough I succumbed to the temptation and taken the job.

The evening I came they had shown me a beautiful application with many windows, forms, grids, accordions. The application was very complex and I immediately knew that I’m going to work with pros. Uttering words of commendations I was still in a mystery because I still didn’t know what I was there for.

So I asked: “What do you expect from me that you were able to develop this alone?” They said: “Well, it is slow!”

Indeed, Ext window with a form and grid took around 4 seconds to show all it contents before the user could interact with it. And it was intranet! No slow internet connection bottlenecks.

“Yes, that’s too much! Let’s start tomorrow to find out why”, I said.

Next day I dug into the bowels of the application and I found that they generated javascript code on the server and then they loaded it to the client. I mean, not only JSON data but the full javascript executable code with the application.

I was not fully sure if this alone could cause the slowness so we started some profiling of both PHP and Javascript code and finally we decided to rewrite the application to adhere to Writing a Big Application in Ext.

To keep it short, by the end of the week, when done, the very same Ext window opened in less than 500ms. Well done, isn’t it.

Anyway, what could be the reasons why it was that slow in the first place?

The server needs some time to generate the javascript. It may not be a lot, however, if you count all database accesses, decision logic and javascript code generation it is probably more than to create a JSON string with data only.
The embedded javascript adds to the size of server-client data transfers. This didn’t attribute too much to the time in this particular case but it can get worse if the internet connection is slower.
The embedded javascript cannot be cached at client. If the application is in a referenced javascript file then, if the server is configured properly, it is cached at client. Of course, the initial load takes longer but then only the html markup and JSON data are actually transferred from the server.
And probably worst: In this kind of loading a request is sent to deliver a component, let’s say a grid. The grid code is returned, the grid is instantiated and rendered and now it needs data. So another request is sent to deliver the JSON data. It’s just too much.

Take this please as my observation and my experience. There may be cases when component loading can work better and faster and I’ll be only glad if I’ll have an opportunity to see such application.

Factory Functions in Ext Extensions (Abstract Classes)

Saki — Sat, 07 Aug 2010 13:37:15 +0000

I have recently run across one of the the Jay Garcia’s excellent screencasts Abstract classes with Ext JS. (Thank you Jay for your effort of educating Ext JS community.)

I’ve been consulting in a company at that time – developers of the client, after seeing the screencast, immediately asked me: “So what should we use? The ‘xtype’ style or Abstract classes?”

The curt answer would be: “Use whatever you prefer.” or “Use both”.

However, decisions based on mere “preference” or on “I use it because it is available” are often not fully rational and can lead to troubles as the application grows. Thus, let’s take a deeper look to see if there are any pitfalls and to find how can we get most of both methods.

Note: Before you continue, read “Writing a big application in Ext”, watch the Jay’s screencast and understand both, otherwise, the following text won’t make any sense to you.

Abstract ExtJS Class

Abstract classes are not to be used directly but they serve more like templates that specify methods and properties to be implemented in classes derived from them. They are very useful in object oriented programming because they force developers to implement all mandatory methods with same signature (signature = arguments the method or function accepts) and return values so there is a greater chance to develop a bug free code.

However, in ExtJS (and JavaScript that is scripting language where source is not compiled but directly interpreted), there is no mechanism to warn developer “you haven’t implemented method XY” or “your implementation has wrong signature” so we need to take care ourselves.

Nevertheless, the idea of abstract classes is useful also in JavaScript/ExtJS environment because:

logic and configuration common to all expected descendants can be put in the abstract base class that eliminates the code duplication, speeds up development and debugging, and increases future code maintainability greatly
abstract classes tell us which methods to implement
it increases the human readability of the code (Remember, we always try to write the code to be readable and understandable by us and others in the future.)

The Basic Idea

The basic idea Jay presents in his great screencast is to extend an Ext Component, FormPanel for example, and add stub methods to it:

Ext.ns('MyApp');
 
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
     submitUrl:null
    ,initComponent:function() {
        Ext.apply(this, {
             items:this.buildItems()
            ,buttons:this.buildButtons()
        });
 
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent
 
    ,buildItems:function() {
        return [];
    } // eo function buildItems
 
    ,buildButtons:function() {
        return [];
    } // eo function buildButtons
 
}); // eo extend

The empty “buildXxx” methods will be implemented in the abstract class extension.

Tweaking the Abstract Class example

While perfect for the educational purposes, we need to tweak this code if want to use it in the production quality application. I shall walk you through recommended improvements.

initialConfig

Ext.Component takes the config object passed to its constructor and saves it in the object variable initialConfig when it instantiates. Although items and buttons in combination with the FormPanel in the above example do not rely on it, so the example runs as expected, initialConfig is used on the Ext.Component level so it may be used by any of Component descendants.

Let’s take care of it and modify initComponent as follows:

    ,initComponent:function() {
        // create config object
        var config = {};
 
        // build config properties
        Ext.apply(config, {
             items:this.buildItems()
            ,buttons:this.buildButtons()
        });
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent

Return Values

Abstract methods in the example return empty arrays. That is no problem for items or buttons but if we want to have also buildTbar or buildBbar factory functions that return empty arrays [] then top and bottom toolbars are always created, but empty, if methods are not implemented in derived classes. (Empty toolbars are quite ugly when rendered.)

Therefore, always return undefined from the abstract methods. For now, the class could look like this:

Ext.ns('MyApp');
 
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
     submitUrl:null
    ,initComponent:function() {
        // create config object
        var config = {};
 
        // build config properties
        Ext.apply(config, {
             items:this.buildItems()
            ,buttons:this.buildButtons()
            ,tbar:this.buildTbar()
            ,bbar:this.buildBbar()
        });
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent
 
    ,buildItems:function() {
        return undefined;
    } // eo function buildItems
 
    ,buildButtons:function() {
        return undefined;
    } // eo function buildButtons
 
    ,buildTbar:function() {
        return undefined;
    } // eo function buildTbar
 
    ,buildBbar:function() {
        return undefined;
    } // eo function buildBbar

Passing `config` to Abstract Factory Methods

If we pass config object to abstract methods then we can apply the created items, buttons, toolbar items directly to it. That has no great benefit in itself, however, if we create a sequence or interceptor of these methods we can use the config object directly.

So now we have:

Ext.ns('MyApp');
 
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
     submitUrl:null
    ,initComponent:function() {
        // create config object
        var config = {};
 
        // build config properties
        this.buildItems(config);
        this.buildButtons(config);
        this.buildTbar(config);
        this.buildBbar(config);
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent
 
    ,buildItems:function(config) {
        config.items = undefined;
    } // eo function buildItems
 
    ,buildButtons:function(config) {
        config.buttons = undefined;
    } // eo function buildButtons
 
    ,buildTbar:function(config) {
        config.tbar = undefined;
    } // eo function buildTbar
 
    ,buildBbar:function(config) {
        config.bbar = undefined;
    } // eo function buildBbar
 
}); // eo extend

The Final Touch

If you look in the initComponent now you see that we call a series of “build” functions in it. Let’s move it into another factory method:

Ext.ns('MyApp');
 
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
     submitUrl:null
    ,initComponent:function() {
        // create config object
        var config = {};
 
        // build config
        this.buildConfig(config);
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent
 
    ,buildConfig:function(config) {
        this.buildItems(config);
        this.buildButtons(config);
        this.buildTbar(config);
        this.buildBbar(config);
    } // eo function buildConfig
 
    ,buildItems:function(config) {
        config.items = undefined;
    } // eo function buildItems
 
    ,buildButtons:function(config) {
        config.buttons = undefined;
    } // eo function buildButtons
 
    ,buildTbar:function(config) {
        config.tbar = undefined;
    } // eo function buildTbar
 
    ,buildBbar:function(config) {
        config.bbar = undefined;
    } // eo function buildBbar
 
}); // eo extend

The above gives you the flexibility of implementing or overriding of the whole buildConfig function or individual items, buttons, bars functions. It also takes care of initialConfig problem.

It’s a kind of a “pattern” and I will publish it in my “file patterns” series on this blog with more code comments.

Example

If we build upon Jay’s example, using the pattern above, we get:

AbstractFormPanel.js:

Ext.ns('MyApp');
 
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
     defaultType:'textfield'
    ,frame:true
    ,width:300
    ,height:200
    ,labelWidth:75
    ,submitUrl:null
    ,submitT:'Submit'
    ,cancelT:'Cancel'
    ,initComponent:function() {
 
        // create config object
        var config = {
            defaults:{anchor:'-10'}
        };
 
        // build config
        this.buildConfig(config);
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent
 
    ,buildConfig:function(config) {
        this.buildItems(config);
        this.buildButtons(config);
        this.buildTbar(config);
        this.buildBbar(config);
    } // eo function buildConfig
 
    ,buildItems:function(config) {
        config.items = undefined;
    } // eo function buildItems
 
    ,buildButtons:function(config) {
        config.buttons = [{
             text:this.submitT
            ,scope:this
            ,handler:this.onSubmit
            ,iconCls:'icon-disk'
        },{
             text:this.cancelT
            ,scope:this
            ,handler:this.onCancel
            ,iconCls:'icon-undo'
        }];
    } // eo function buildButtons
 
    ,buildTbar:function(config) {
        config.tbar = undefined;
    } // eo function buildTbar
 
    ,buildBbar:function(config) {
        config.bbar = undefined;
    } // eo function buildBbar
 
    ,onSubmit:function() {
        Ext.MessageBox.alert('Submit', this.submitUrl);
    } // eo function onSubmit
 
    ,onCancel:function() {
        this.el.mask('This form is canceled');
    } // eo function onCancel
 
}); // eo extend

Mention please that I moved hard-wired button texts to class properties. The reason is that this way we can easily localize (translate) these texts to another languages. I didn’t take care of messages of handlers though. You will do in your localizable applications, won’t you?

AddressFormPanel.js:

Ext.ns('MyApp');
 
MyApp.AddressFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
     title:'Edit address data'
    ,submitUrl:'addressAction.asp'
    ,buildItems:function(config) {
        config.items = [{
             name:'address1'
            ,fieldLabel:'Address 1'
        },{
             name:'address2'
            ,fieldLabel:'Address 2'
        },{
             name:'city'
            ,fieldLabel:'city'
        },{
             xtype:'combo'
            ,name:'state'
            ,fieldLabel:'State'
            ,store:['MD', 'VA', 'DC']
        },{
             xtype:'numberfield'
            ,name:'zip'
            ,fieldLabel:'Zip Code'
        }];
    } // eo function buildItems
 
});
 
// eof

NameFormPanel.js:

Ext.ns('MyApp');
 
MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
     title:'Edit name data'
    ,submitUrl:'nameAction.asp'
    ,okT:'OK'
 
    ,buildItems:function(config) {
        config.items = [{
             name:'firstName'
            ,fieldLabel:'First Name'
        },{
             name:'lastName'
            ,fieldLabel:'Last Name'
        },{
             name:'middleName'
            ,fieldLabel:'Middle Name'
        },{
             xtype:'datefield'
            ,name:'dob'
            ,fieldLabel:'DOB'
        }];
    } // eo function buildItems
 
    //Extension
    ,buildButtons:function(config) {
 
        // let parent build buttons first
        MyApp.NameFormPanel.superclass.buildButtons.apply(this, arguments);
 
        // tweak the submit button
        config.buttons[0].text = this.okT;
        config.buttons[0].handler = this.onOkBtn;
 
    } // eo function buildButtons
 
    //Override
    ,onOkBtn:function() {
        console.info('OK btn pressed');
    } // eo function onOkBtn
 
}); // eo extend
 
// eof

With this setup, we can even create instance of AbstractForm panel directly passing some/all build functions inline:

var nameForm = new MyApp.AbstractFormPanel({
     title:'Name Form Panel configured inline'
    ,width:300
    ,height:200
    ,renderTo:Ext.getBody()
    ,buildItems:function(config) {
        config.items = [{
             name:'firstName'
            ,fieldLabel:'First Name'
        },{
             name:'lastName'
            ,fieldLabel:'Last Name'
        },{
             name:'middleName'
            ,fieldLabel:'Middle Name'
        },{
             xtype:'datefield'
            ,name:'dob'
            ,fieldLabel:'DOB'
        }];
    } // eo function buildItems
});

Note: Although the above works, it violates the rule of not instantiating an abstract class directly. It’s up to you if you will do it or not.

Combining with “xtypes”

Now, do not succumb to the temptation of “putting everything” in factory functions. Abstract classes are just a programming style, not an universal solvent.

Imagine, you have your own carefully crafted Submit and Cancel buttons so if you would “put everything” in the factory functions you would need to copy buttons configurations many times because also toolbars, grids, data views, etc can contain them.

Create extensions (xtypes) for those buttons instead. The following illustrates the approach:

SubmitButton.js

Ext.ns('MyApp');
 
MyApp.SubmitButton = Ext.extend(Ext.Button, {
     text:'Submit'
    ,iconCls:'icon-disk'
    ,initComponent:function() {
        MyApp.SubmitButton.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
}); // eo extend
 
Ext.reg('submitbutton', MyApp.SubmitButton);
 
// eof

CancelButton.js:

Ext.ns('MyApp');
 
MyApp.CancelButton = Ext.extend(Ext.Button, {
     text:'Cancel'
    ,iconCls:'icon-undo'
    ,initComponent:function() {
        MyApp.CancelButton.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
}); // eo extend
 
Ext.reg('cancelbutton', MyApp.CancelButton);
 
// eof

and AbstractFormPanel.js:

Ext.ns('MyApp');
 
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
     defaultType:'textfield'
    ,frame:true
    ,width:300
    ,height:200
    ,labelWidth:75
    ,submitUrl:null
    ,initComponent:function() {
 
        // create config object
        var config = {
            defaults:{anchor:'-10'}
        };
 
        // build config
        this.buildConfig(config);
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        MyApp.AbstractFormPanel.superclass.initComponent.call(this);
 
    } // eo function initComponent
 
    ,buildConfig:function(config) {
        this.buildItems(config);
        this.buildButtons(config);
        this.buildTbar(config);
        this.buildBbar(config);
    } // eo function buildConfig
 
    ,buildItems:function(config) {
        config.items = undefined;
    } // eo function buildItems
 
    ,buildButtons:function(config) {
        config.buttons = [{
             xtype:'submitbutton'
            ,scope:this
            ,handler:this.onSubmit
        },{
             xtype:'cancelbutton'
            ,scope:this
            ,handler:this.onCancel
        }];
    } // eo function buildButtons
 
    ,buildTbar:function(config) {
        config.tbar = undefined;
    } // eo function buildTbar
 
    ,buildBbar:function(config) {
        config.bbar = undefined;
    } // eo function buildBbar
 
    ,onSubmit:function() {
        Ext.MessageBox.alert('Submit', this.submitUrl);
    } // eo function onSubmit
 
    ,onCancel:function() {
        this.el.mask('This form is canceled');
    } // eo function onCancel
 
}); // eo extend
 
// eof

Note: The above buttons are far too simple to be extended in the real world but you get the point, right?

Conclusion

Abstract classes, as Jay Garcia defines and presents them, are a very useful ExtJS programming technique and if you use them in the information provided in this post your code will be clean, flexible and maintainable. That is what all we developers want.

Happy coding!

New Example – Grid in Card Layout

Saki — Tue, 13 Oct 2009 12:49:17 +0000

Hi all,

I’ve just uploaded new example of Grid in Card Layout

Enjoy!

How to Convert DVD to iPhone Video with Subtitles and Chapters on Linux

Saki — Sun, 04 Oct 2009 21:02:44 +0000

iPhone can play video that contains multiple streams and chapters:

video
multiple audio streams (languages)
multiple subtitles (languages)
chapters for easy navigation

After some googling and many trials and errors I found a multiplatform software that can create videos with all the above features. The software is HandBrake. HandBrake for (openSUSE) Linux can be downloaded from Packman.

Let’s convert our DVD to the iPhone video. For that insert an original DVD in the drive, start HandBrake and select source.

Select iPhone & iPod Touch preset and type the file name and the destination directory.

There is not too much to set on Video tab, however, you can play with quality if you want.

In Audio tab, add as many audio tracks as you want:

If you want to “burn” subtitles into video, just select one from the original DVD and you’re done. More difficult is if you want Closed Captioning subtitles (that can be turned off on iPhone). For that you need external files with subtitles in srt format. You can download them from opensubtitles.org. The problem can be that the downloaded subtitles may not be in sync with you video. I haven’t found a better way only to encode the DVD and, if subtitles are out of sync, use Subtitle Composer to adjust the timing(s) and re-encode.

Default settings in H.264 tab do not need any change.

Rename chapters if you want. Names are sometimes on DVD covers, sometimes not.

Start encoding, wait an hour or so and then download the resulting video to your iPhone with iTunes.

How to extract subtitles from DVD

Saki — Fri, 02 Oct 2009 09:11:09 +0000

mencoder dvd://1 -oac copy -ovc copy -o /dev/null -vobsubout output -sid 1

Then use avidemux2_qt4

Keeping modified records of EditorGridPanel while paging

Saki — Mon, 28 Sep 2009 08:59:44 +0000

If you modify records of an editable grid with paging and if you then page-out, your changes are lost. Well, they are not lost in fact unless you have set pruneModifiedRecords:true on the strore. The modifications are still available so we just need to apply them. Here is the code fragment that does it:

var grid = new Ext.grid.EditorGridPanel({
    store:new Ext.data.Store({
         listeners:{
            load:{scope:this, fn:function(store) {
 
                // loop through modified records
                var modified = store.getModifiedRecords();
                for(var i = 0; i < modified.length; i++) {
 
                    // see if we have a record with same id 
                    // and apply changes if yes
                    var r = store.getById(modified[i].id);
                    if(r) {
                        var changes = modified[i].getChanges();
                        for(p in changes) {
                            if(changes.hasOwnProperty(p)) {
                                r.set(p, changes[p]);
                            }
                        } // eo changes loop
                    }
                } // eo modified loop
            }} // eo load listener
        } // eo listeners
 
        // rest of store configuration
 
    })
 
    // rest of grid configuration
 
}) // eo grid

pruneModifiedRecords must be false (the default) for this to work.