Posts tagged ExtJS

sencha-logo

ExtJS: Selecting Radio Buttons

Aug 14th

Posted by existdissolve in ExtJS

3 comments

As you develop your ExtJS application, you’ll inevitably need to use a good ol’ radio button. Whether you’re using radio buttons as part of a larger form, or just a one-off for a special purpose, ExtJS has some powerful ways to use them…if you know how.

Let’s say we have a simple form for adding cars to our imaginary application. First, let’s create a model to define our data:

Ext.define("Cars.model.Car"), {
    extend: "Ext.data.Model",
    fields: [
        {name: "make", type:"string"},
        {name: "model", type: "string"},
        {name: "color", type: "string"}
    ]
});

Okay, nothing to out of the ordinary here. We’ve defined a simple model for our “car” data, and for each car we’ll enter the make, model, and specify the color.

Now let’s make our form for entering this data:

Ext.define("Cars.view.cars.CarForm", {
    extend: "Ext.form.Panel",
    alias: "widget.carform",
    title: "Enter Car Details",
    items: [
        {
            xtype: "textfield",
            name: "make",
            fieldLabel: "Make of Car"
        },
        {
            xtype: "textfield",
            name: "model",
            fieldLabel: "Model of Car"
        },
        {
            xtype: "radiogroup",
            fieldLabel: "Color",
            id: "colorgroup",
            defaults: {xtype: "radio",name: "color"},
            items: [
                {
                    boxLabel: "Red",
                    inputValue: "red",
                },
                {
                    boxLabel: "Silver",
                    inputValue: "silver",
                },
                {
                    boxLabel: "Blue",
                    inputValue: "blue",
                }
            ]
        }
    ]
});

Pretty simple stuff here as well. One thing to point out, however, More >

, ,
sencha-logo

ItemClick and ItemContextMenu

Jul 8th

Posted by existdissolve in ExtJS

No comments

Custom context menus are one of the features of ExtJS that I love. They are stupid simple to add in, and ridiculously customizable-they can really add some value to your app and help preserve real estate if you have a lot of embedded actions that need to happen.

For example, in one of my controllers, I’m looking for the “itemcontextmenu” event on a grid:

this.control({
    "bookmarks": {
       itemclick: function(...) {
          ....
       },
       itemcontextmenu: function(view,record,item,index,e) {
          var me = this;
          var r = record.data;
          e.stopEvent();
          if(item.ctxMenu) {
              item.ctxMenu = new Ext.menu.Menu({
                 items: [
                    {
                       text: "Delete This Thing",
                       icon: "images/delete.png",
                       handler: function(btn) {
                          me.deletebookmark(record,item);
                       }
                    }
                 ]
              });
         }
     }
})

One of the issues I was running into, however, was that whenever I would “right” click using my Mac’s “magic mouse” (e.g., Ctrl+click), both the itemclick AND itemcontextmenu events would fire.

To debug this, I took a quick peek at the “event” object passed on both methods. This object provides a bunch of information about the event that was fired, including:

  • any keys that triggered the event
  • whether Ctrl was pressed
  • whether Shift was pressed
  • what “type” of event (e.g., “click” for a mouse event)

Armed with this information, I was able to adjust my “itemclick” listener a bit, More >

, , ,
«12