Changing the css of select input menu in HTML5

We can change the Look and feel of the select input element in HTML in a very easy manner. Things that we would wish to change are the dropdown icon, the width and height of select button, the background color etc.

Here is how we do it.

1. Enclose the <select> in a <div>

<div class="select-wrapper">
    <select>
        </option value="1">Option 1</option>
        </option value="2">Option 2</option>
    </select>
</div>

2. Add following to your style sheet

.select-wrapper select { 
    moz-appearance: none;
    -webkit-appearnce: none;
    appearance: none;
    background-color: rgb(0, 133, 255);
    border-radius: 5px;
    box-shadow: inset 0 0 10px #444;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    width: 25%;
    color: white;
    font-size: 16px
}

And you shall see a nice blue styled custom select button

Flash can soon have a co-passenger!!

Flash, after it's ship wreck fell into the abyssal plains. Waiting with such other hard-lucked passengers which fell from the ship.  But wait, we seem to have a new entrant here, its iOS programming.
Oh Yess! It is indeed iOS native code programming.

Jokes apart, iOS seems to be joining Flash in then abyssal plains because:

1. Android is the KING!!!!
2. HTML5, CSS3, Javascript based apps can do almost anything that iOS apps can.
3. These are easier to learn than Objective C.
4. HTML5 and CSS3 are cross-platform - where as iOS are not.

Why would a developer prefer to learn a new language when he can do it using what he knows. A client will mostly in his right senses invest in HTML5 and CSS3 when he can leverage these to get apps made for iOS, Android and Windows 8, rather than investing in app which would work only on iOS.

So, Flash can finally have a company with which it will undoubtedly be very HAPPY!!!!

ExtJS Tweak : Selecting first and last row of a grid

Very often we need to select a row by default in the grid, since some other pieces of code are linked to selection of the rows in grid , for example like charts rendering data in the grid and something like that.

The problem is the the first row in grid is not selected by default in ExtJS and we have to break our heads.
The event - 'viewready' is the answer. In the documentation , it is explicitly written to use this event to select a row in grid by default.

this small snippet of code will do the job(select the first row),
suppose you have defined your grid as 'grid', then:

 grid.on('viewready',function(){  
           this.getSelectionModel().select(0);  
      });  

Now we would also want some times to select the last row in case we have added a record. The following snippet will do the job beautifully.

 xmlgrid.getSelectionModel().select(store.getCount()-1);  

We have xmlgrid as the grid and "store" is name of data store attached to the grid.