If i add a button like this
xtype: 'component',
autoEl: {
html: '<input type="submit" class="custom_loginbtn" value="Submit" id="login"/>'
}
any idea how to add a click event to this ?
Regards
try adding listener
listeners: {
render: function(component){
component.getEl().on('click', function(e){
console.log(component);
alert('test');
});
}
}
check this
xtype : 'component',
itemId : 'submitbtn',
autoEl : {
html : '<input type="submit" class="custom_loginbtn" value="Login" id="login"/>'
},
listeners : {
el : {
delegate : 'input',
click : function()
{
}
}
}
This is the best approach, notice the use of a managed listener with .mon() in place of .on() which is better to use when you're listening to DOM elements from components that could be destroyed
xtype: 'component'
,html: '<input type="submit" class="custom_loginbtn" value="Submit" id="login"/>'
,listeners: {
afterrender: function(inputCmp) {
inputCmp.mon(inputCmp.el, 'click', function(){alert('click!')}, this, {delegate:'input'});
}
,single: true
}
Also, your use of autoEl is analogous to just setting the html property of the component, other options in autoEl let you manipulate type and attributes of the outer tag that is automatically created to encompass the component
If you did this instead you could turn turn the component itself into an <input> and avoid the wrapping <div>:
xtype: 'component'
,autoEl: {
tag: 'input'
,cls: 'custom_loginbtn'
,type: 'submit'
,value: 'Submit'
}
,listeners: {
afterrender: function(inputCmp) {
// no delegate needed, since inputCmp.el is the <input>
inputCmp.mon(inputCmp.el, 'click', function(){alert('click!')}, this);
}
,single: true
}
You are using a standard submit button, why not use an xtype button? - it has a handler you can specify for your click event.
Related
How can I create a custom component that has button containing a checkbox in the middle of it.
Thanks
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype:'window',
width:200,
height:200,
layout:'fit',
title:'I\'m a test window',
items:{
xtype:'button',
text:'<input type="checkbox" name="Check" value="Check" onclick=\'handleClick(this);\'/>',
listeners:{
click: function(){
alert('buttonClick');
}
}
}
}).show();
}
});
function handleClick(checkbox){
alert('checkbox click');
}
You can do what you want with this, the problem is to get checkbox events.
I'm trying to use $ionicPopup to handle login/registration on my app.
I'm opening it from a service, so I created a new scope and attached it to the ionicPopup.
It looks something like this:
$ionicPopup.show
template: '''
<form name="loginForm" novalidate>
...
</form>
''',
scope: $scope,
buttons: [
{
text: 'Cancel',
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: ( e ) ->
form = $scope.loginForm #why is it undefined?
}
]
So I named the form as loginForm, and I want to access it inside the onTap function to handle validation. But the loginForm does not exists on the $scope, like it would in a normal form validation inside a controller.
How should I handle the validation here?
If you give ionicpopup a templateUrl, instead of hard coded template string, you can use a regular controller inside the template that does the validation.
I deleted all the ionicpopup related buttons and placed the necessary buttons inside the template.
In this way I was able to control the ionicpopup's state from the controller (i.e. closing the popup).
I found solution, it works for me. All you need to change is define in controller your form:
$scope.form = {
loginForm: {}
};
$ionicPopup.show
template: '''
<form name="form.loginForm" novalidate>
...
</form>
''',
scope: $scope,
buttons: [
{
text: 'Cancel',
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: ( e ) ->
form = $scope.form.loginForm
}
]
Using my solution, you don't have to delete the ionic popup buttons.
What you can do to validate, is by using ng-Model.
You don't have to use <form>. So I remove <form>.
$ionicPopup.show
template: '<input name="username" ng-model="data.username">',
scope: $scope,
buttons: [
{
text: 'Cancel',
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: ( e )
var user_name = $scope.data.username
// do validation here
if(user_name != 'undefined') {
...
}
}
]
I prefer not to remove the ionic popup buttons. Hope it is useful to others. cheers!
Use
onTap: ( e )
e.eventPreventDefault()
var user_name = $scope.data.username
// do validation here
if(user_name != 'undefined') {
...
}
I'm learning extjs 4.1 and I can't find click event on most of the components - I'm I blind or I'm unable to react on click on other components than button?
What is the reason? HTML supports click on all elements.
Every component can have the click event exposed at the element level. Some components like Ext.button.Button have a click event at the component level.
Here is a nice way to add a click event on a panel:
new Ext.panel.Panel({
listeners: {
click: this.handlePanelClick,
element: 'el'
}
});
edit to respond to comment
The element string is a any element that is a property of the component.
new Ext.panel.Panel({
listeners: {
click: function() {
alert('you clicked the body');
},
element: 'body'
}
});
The Ext docs have a more thorough explanation http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Observable-method-addListener
You can add any DOM event pretty easily by accessing the Ext.dom.Element object that almost all visible components contain once it has been rendered.
Simply add a listener to the afterrender event that adds the event you want to the dom object.
Ext.create('Ext.panel.Panel', {
// other panel configs ...
listeners: {
'afterrender': function(panel) {
panel.el.on('click', function() {
alert('clicked');
});
}
}
});
I think there is also a way to do it for all components of a class that extends Ext.util.Observable (all visible components). I haven't done it before so you would have to play around with that.
Using a self-referencing managed listener (cleanest imo):
Ext.create('Ext.panel.Panel', {
listeners: {
'afterrender': function(panel) {
this.mon(this.getEl(), 'click', this.onClick, this)
}
},
onClick: function() {
alert("mmm mon mon mon");
}
});
If you are only listening to click event you can also do this
xtype: 'container',
listeners: {
el: {
click: function() {
alert('I clicked');
},
scope: this
}
}
If you need to listen to an event that the Ext.dom.Element does not fire, you will need to attach it in the 'render' listener, like others have suggested.
How to create small button with icon inside textfield, like with datefield? In previous version of ExtJS there was a CompositeField but cant find it in ExtJS 4.
Just extend http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger You can change the icon of the trigger field with CSS and implement the behavior of clicking the icon in the onTriggerClick template method
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
// override onTriggerClick
onTriggerClick: function() {
Ext.Msg.alert('Status', 'You clicked my trigger!');
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
renderTo: Ext.getBody(),
items:[{
xtype: 'customtrigger',
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger'
}]
});
Is the icon clickable? If so, you are looking for Ext.form.field.Trigger. If not, you might try overriding the Text field's getSubTplMarkup() function to provide some custom dom.
For example:
Ext.define('MyField', {
extend: 'Ext.form.field.Text',
getSubTplMarkup: function() {
return this.callParent(arguments) + '<span class="my-icon"></span>';
}
});
I am creating an ExtJS widget which extends Ext.Component. The following is the sample code.
Ext.define('test.widget',{
extend: 'Ext.Component',
initComponent: function() {
this.callParent();
},
onRender: function() {
this.callParent(arguments);
Ext.create('Ext.form.Label', {
html: '<img src="Available.png" /> Test',
renderTo: me.renderTo
});
}
});
The above widget renders into the browser as below
<div id="ext-comp-1014" class="x-component x-component-default" role="presentation"></div>
<label for="" id="label-1028" class="x-component x-component-default" role="presentation"><img src="Available.png" > Test</label>
How do I get rid of the div tag? or is there any way to convert the div to span?
You can convert the default div to a span tag. You can also use any other html tag in place of the div. Components have an autoEl attribute which allows you to specify any html tag as well as any html tag attributes.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.AbstractComponent-cfg-autoEl
Ext.define('test.widget',{
extend: 'Ext.Component',
autoEl: {tag:'span'},
initComponent: function() {
this.callParent();
},
onRender: function() {
//...
}
}