Crud redesign (ExtJs 4 MVC)

Introduce

Sometimes I read interesting articles about UI usability, design patterns, and i try implement some best of them for my working projects. My inspiration to write this post come from slideshow public on HN : Designing better user interfaces and beauty glyphicons

I create frontend in ExtJs 4 (mvc) and REST API backend in LithiumPHP 5.3 (mvc + aop) + WebSocket Server in Java, so my natural goal is: detailing old ExtJs CRUD to clean and user friendly interface.

Before detailing


Design patterns UI i use in this project:

  1. clean minimalistic icons
  2. 3 action button’s `add`, `edit`, `remove`
  3. `add` and `edit` action open new pupup window with form, `edit` action can execute in two way by `dblClick` on record or select record and click `edit` button
  4. window icon and submit action is the same as action button’s
  5. submit button is more exprosure by add 1px solid black border
  6. submit button are on right side, i think is natural movement of arm
  7. cancel button is witchout icon and black border
  8. reset button gone away

Problems

I wanted to colorize submit button on green collor but ExtJs 4 (google) dont allow any simple method to do that i found many solutions using sass templating and ovveride button class, i dont understand, create new template for one button !? I stop on border and add icon to submit action.

After detailing:


Form snipset code view:

Css for border submit button: