How to add Handler into a Button

[SchattenMann]

Greetings,

i'm testing Designer on the past 2 days and it's looking very promising. congratulations on the great job!

i've encounter a problem really small but annoying. i just can't figure out how to add the handler property into a button. me being stupid is always an option but by god i just can't find it anywhere.

i don't want to have all the problem to assign an id to every button just to add an event or handler for testing.

is there really no way to do just this:

{
      xtype: 'button',
      ui: 'confirm-small',
      text: 'Save',
      handler: function () {
             Ext.Msg.Alert('title','SWEEEEET');
      }
}

[tagsum]

The purpose the designer is to simply configure your components. It does 80% of the work, while your implementation files do the rest.

Watch this video for a better explanation: http://www.sencha.com/learn/advanced...-ext-designer/

So, simply said: You'll want to add the handler to your exported implementation file (the one that ends in .js, not .ui.js).

[SchattenMann]

thank you tagsum

i understand that but to be honest Designer already does much more than just Design...in my opinion Designer is becoming a standard to all Coder Softwares out there. with that sayd i can't understand why we can do so many complex task in designer already and not this one...so simple

we can add a "custom property" named "handler" but the problem is that the content is automatic escaped so...by by function elements lol

that means i have to do all the design before starting the code and that, in my opinion, is not that practice.

ofc this is not such a big deal, just me saying my opinion.

[aconran]

SchattenMann -

Are you testing Designer 2 or Designer 1?

If you are testing Designer 1 (which is the forum you posted in), tagsum's response above is correct.

If you are testing Designer 2, (Designer 2 forum), you will want to subscribe to the 'tap' or 'click' event depending on what target framework you are working with.

To do so, drag out your button and then go to the bottom right of the property grid. There is an "Events" entry with a plus icon next to it. Click it.

In Touch you will be presented with a choice between Basic Event Binding and Delegate Event Binding. You want Basic Event Binding.

In Ext it will automatically choose Basic Event Binding.

You will now be presented with a chooser to select the name of the event you want to subscribe to. For Touch you will want to subscribe to 'tap' and for Ext you will want to subscribe to 'click'.

It will create a node that looks like "click onButtonClick". If you double click the new node in the Inspector you will be dropped into a full blown code editor. Here you can put in your Ext.Msg.alert.

Doing it this way as opposed to just a simple "handler" function has a few advantages. It will ensure that your function has scope of the top level class that you are creating and it will make the exported code more manageable to read.

[SchattenMann]

I'm using 2.0.0.360

I missed the fact that there were specific forums for each version, please move my thread if possible.

the way you described is the one i'm using already...although if i understood correctly that will force me to have a itemID specific for each and single button i will have in my application...am i right?

how will that affect my application when i have multiple instance running at the same time?

meaning that i will create my form class (xtype:myfancyform) where every field has an itemID and then have multiple...tabs...running this form class.

hope i had explained correct...as everyone can notice english is not my main language :P

[SchattenMann]

PS: before starting a new thread let me ask if had anyone tried using UPC Barcode Reader with SenchaTouch? it does work but i just can't capture the keyup keys because it seems every number is composed by a code with 3 digits

http://www.wikihow.com/Read-12-Digit-UPC-Barcodes

using this code:

var label;
var charCode = e.event.keyCode;

if (charCode == 8) label = "backspace"; //  backspace
if (charCode == 9) label = "tab"; //  tab
if (charCode == 13) label = "enter"; //  enter
if (charCode == 16) label = "shift"; //  shift
if (charCode == 17) label = "ctrl"; //  ctrl
if (charCode == 18) label = "alt"; //  alt
if (charCode == 19) label = "pause/break"; //  pause/break
if (charCode == 20) label = "caps lock"; //  caps lock
if (charCode == 27) label = "escape"; //  escape
if (charCode == 33) label = "page up"; // page up, to avoid displaying alternate character and confusing people             
if (charCode == 34) label = "page down"; // page down
if (charCode == 35) label = "end"; // end
if (charCode == 36) label = "home"; // home
if (charCode == 37) label = "left arrow"; // left arrow
if (charCode == 38) label = "up arrow"; // up arrow
if (charCode == 39) label = "right arrow"; // right arrow
if (charCode == 40) label = "down arrow"; // down arrow
if (charCode == 45) label = "insert"; // insert
if (charCode == 46) label = "delete"; // delete
if (charCode == 91) label = "left window"; // left window
if (charCode == 92) label = "right window"; // right window
if (charCode == 93) label = "select key"; // select key
if (charCode == 96) label = "numpad 0"; // numpad 0
if (charCode == 97) label = "numpad 1"; // numpad 1
if (charCode == 98) label = "numpad 2"; // numpad 2
if (charCode == 99) label = "numpad 3"; // numpad 3
if (charCode == 100) label = "numpad 4"; // numpad 4
if (charCode == 101) label = "numpad 5"; // numpad 5
if (charCode == 102) label = "numpad 6"; // numpad 6
if (charCode == 103) label = "numpad 7"; // numpad 7
if (charCode == 104) label = "numpad 8"; // numpad 8
if (charCode == 105) label = "numpad 9"; // numpad 9
if (charCode == 106) label = "multiply"; // multiply
if (charCode == 107) label = "add"; // add
if (charCode == 109) label = "subtract"; // subtract
if (charCode == 110) label = "decimal point"; // decimal point
if (charCode == 111) label = "divide"; // divide
if (charCode == 112) label = "F1"; // F1
if (charCode == 113) label = "F2"; // F2
if (charCode == 114) label = "F3"; // F3
if (charCode == 115) label = "F4"; // F4
if (charCode == 116) label = "F5"; // F5
if (charCode == 117) label = "F6"; // F6
if (charCode == 118) label = "F7"; // F7
if (charCode == 119) label = "F8"; // F8
if (charCode == 120) label = "F9"; // F9
if (charCode == 121) label = "F10"; // F10
if (charCode == 122) label = "F11"; // F11
if (charCode == 123) label = "F12"; // F12
if (charCode == 144) label = "num lock"; // num lock
if (charCode == 145) label = "scroll lock"; // scroll lock
if (charCode == 186) label = ";"; // semi-colon
if (charCode == 187) label = "="; // equal-sign
if (charCode == 188) label = ","; // comma
if (charCode == 189) label = "-"; // dash
if (charCode == 190) label = "."; // period
if (charCode == 191) label = "/"; // forward slash
if (charCode == 192) label = "`"; // grave accent
if (charCode == 219) label = "["; // open bracket
if (charCode == 220) label = "\\"; // back slash
if (charCode == 221) label = "]"; // close bracket
if (charCode == 222) label = "'"; // single quote

console.debug(label);

i get

05 ALT 305 ALT 404 ALT 805 ALT 204 ALT 805 ALT 305 ALT 304 ALT 904 ALT 904 ALT 904 ALT 905 ALT 105 ALT 601 ALT 3

that just don't make any sense to me

[aconran]

the way you described is the one i'm using already...although if i understood correctly that will force me to have a itemID specific for each and single button i will have in my application...am i right?

how will that affect my application when i have multiple instance running at the same time?

Sounds like you are using touch. Yes, you will need to have an itemId. itemId's are unique to the instance of a particular class, they are not global. That means you can have as many "fancyforms" as you want instantiated. You just can't have your itemId's within fancyform collide (having 2 textfields with the same itemId)

[aconran]

PS: before starting a new thread let me ask if had anyone tried using UPC Barcode Reader with SenchaTouch?

Never tried but that is cool! How are you hooking up the barcode reader? It just sends keyboard commands?

[SchattenMann]

itemId's are unique to the instance of a particular class, they are not global.

how in earth did i missed that on the wiki?

i will add an itemId to all fields so....problem solved

[SchattenMann]

Never tried but that is cool! How are you hooking up the barcode reader? It just sends keyboard commands?

at first i will use a USB barcode reader connected to a Android Tablet. later on i will try to use the camera to detect the barcode and read it.

for now i have a USB barcode reader connected into my laptop. at first i tough it would send simple keyboard commands but thats not the case. if you moniotr e.event.keyCode you will have 4 key pressed per char. i would think it had something to do with that site i've posted that says each number (0-9) correspond to 3 digits that together we get 7.

unfortunately this sequence

05 ALT 305 ALT 404 ALT 805 ALT 204 ALT 805 ALT 305 ALT 304 ALT 904 ALT 904 ALT 904 ALT 905 ALT 105 ALT 601 ALT 3

makes no sense to me at all. i only need to capture the end ENTER but i just can't find the correct key code sequence for it.

other problem i had was to use a correct event to capture the data. barcode readers just type 12 digits at the speed of light so keyup event will go berseker with it. i'm using a keycode event with a 1000ms delay but thats not the best solution at all anyway because it will fire one event per char only with a dellay. is it possible to fire an event like valueChange but with no need to loose focus on the field for it to fire?