Posts Tagged ‘javascript’

ExtJS 4 bouncy box animation

Monday, November 5th, 2012

Do you know ExtJS has some nice animation features? Here it is a very simple notification box that “pops in” from outside the browser.

It is pretty straightforward – show a window outside the viewport and use the Window.animate() method. `animate` is inherited from AbstractComponent, so it is usable on all kinds of components.
However, there is one gotcha. If you initially render the window on the right or bottom outside the screen (i.e. coordinates 10000,10000) the viewport will slide to keep the shown window in focus. I’m not sure why it does it. So, we do it a bit tricky – first show the window with negative coordinates (viewport will not slide in that way) and second – ensure the window is really shown before attempting to do `setPosition()` or `animate()`. According to the docs `showAt()` should return `this` and be chainable, but in my testing invironment it returns undefined… I’ve put a dumb setTimeout() – don’t do that if you have choice – chain showAt() or use onShow listener.

Using my sample code you should first create a NS.TestAnimationBox component and then do a `createWindow()` on it.

Ext.define('NS.TestAnimationBox', {
    extend: 'Ext.window.Window',
    width: 250,
    height: 150,
    layout: 'fit',
    title: 'Reminder',

    constructor: function(cfg){
        this.items = this.getItems();

        var me = this;

        me.showAt(-2000, -2000); // initial 'show' outside browser

    slide: function(){
        var me = this;
        var iViewHeight = Ext.getBody().getViewSize().height;
        var iViewWidth = Ext.getBody().getViewSize().width;

        me.setPosition(iViewWidth + me.width - 10, iViewHeight - me.height - 40); // adjust position just outside on the right
            duration: 750,
            easing: 'bounce-out',
            to: {
                x: iViewWidth - me.width - 10

    getItems: function(){
        var me = this;

        return [
                bodyPadding: 10,
                html: 'Some text here',
                buttons: [
                        text: 'Reset',
                        handler: function(){
                        text: 'Close',
                        handler: function(){
                            me.setPosition(-2000, -2000);

    createWindow: function(){
        var me = this;

        }, 100); // just to be sure there it is time interval between showing and sliding


ExtJS 4 – clear/reset combobox

Friday, August 3rd, 2012

Surprisingly there is no native way to reset the value of a combo box. Once the user selects something in it, it can’t go back to ‘clear’ state. From this moment on the user can change the value with some other value, but can’t remove it at all. It is possible to use .setValue(”) on the ComboBox component to clear it programatically. But how exactly would you do it? Some people put additional form button with on click handler that finds the combo and .setValue-s it to empty. Other mix the combo with triggerfield and create another trigger that does the same.

These are all nice options, but are completely useless when it comes to the user’s uncanny ability to mess things up. I’ve seen a tons of users that do the following:
1. select some option in the combo
2. say ‘oh, I do not need this here’
3. mark the text in the combo’s textfield and delete it
4. hit submit
What is wrong here? The actual combo value is not dependant of the displayed text. If you remove the text, the value is still there, hidden behind the scene. And when you submit that form, the old combo value will be there and will be send to the server. And users do it all the time, it doesn’t matter if there is a big red button right next to the field that says “clear that combo”.

The easier solution for all these problems is to play along with the user. Make the combo clear its value when the text from the textfield is removed. It is not that complicated:

    xtype: 'combo',
    name: 'department_id',
    fieldLabel: 'Department',
    store: me.getDepartmentStore(),
    displayField: 'name',
    valueField: 'id',
    enableKeyEvents: true,
    listeners: {
        keyup: function(cmp){
            if (cmp.lastValue == ''){

ComboBox is descendant of Ext.form.Field.Text so you can use its key events. When the user presses BACKSPACE or DEL to remove the text, the keyup event will fire and it will check the lastValue property. Both `rawValue` and `lastValue` hold the actual text in the textfield, so if this property is empty the combo should be cleared.