extjs control components

http://stackoverflow.com/questions/17233751/extjs-4-selector-for-text-fields

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

CSS

.mycls input {
    border: 1px solid #fc3;
}

JavaScript

var listeners = {
    'textfield[cls="mycls"]': {
        change: function() { alert('textfield with cls="mycls" changed'); }
    }
};
// we assigning listeners before targets are even created
// the second param is the scoope. I use window just for the sake of example
Ext.app.EventBus.control(listeners, 'check');

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    id: 'check',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'name',
        cls: 'mycls',
        fieldLabel: 'Name',
        allowBlank: false  // requires a non-empty value
    }, {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: 'Email Address',
        vtype: 'email'  // requires value to be a valid email address format
    }]
});