How to use button instead of text as a link in a grid pannel using extjs
the following code implies a link to a different page and i need that "Fill" link to be as button... please help me anyone
var text = 'Fill'
if(value != undefined && value !='') {
text = Ext.Date.format(value,'Y-m-d');
}
return '<span class="grid_link">'+text+'</span>';
Try to use renderTo component attribute
return '<span class="grid_link"><div id="btn"/></span>';
...
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: 'btn',
handler: function() {
alert('You clicked the button!')
}
});
Related
Hi i have been using Extjs html editor.I want to customize the html editor like i have to display a customized alert box when we click button in toolbar.how can we do that?
thanks in advance.
Ext.define('MyApp.ux.MyOwnHtmlEditor',{
extend: 'Ext.form.field.HtmlEditor',
xtype: 'myhtmleditor',
getToolbarCfg: function() {
// get original toolbar:
var toolbar = this.callParent(arguments);
// add custom item:
toolbar.items.push({
xtype: 'button',
iconCls: 'x-fa fa-question-circle',
handler: function() {
Ext.Msg.alert('Dear user!', 'No, we won\'t help you!');
}
});
// Modify handler of existing button:
toolbar.items[3].handler = function() {
Ext.MessageBox.alert('Dear user!', 'If you want Italic, please go to Italy!');
};
// return toolbar to calling function
return toolbar;
}
})
And use it e.g. like this:
{
xtype: 'myhtmleditor'
}
Example fiddle
Good Morning All,
I have an ExtJS 5 tabpanel. When the tabpanel first appears there is a single tab inside with a star for the title. What I need is when the user clicks the star for it to create a new tabItem. I have tried the activate event but that only works with more than one tab present. I have also tried binding to the a click event and nothing happens for that. Here is the code I have now:
{
xtype:'tabpanel',
itemId:'tabCtr1',
width:785,
items:[
{ iconCls: 'btn-NewTab', html : 'A simple tab' }
]
}
function assetDetailsDialog_AfterRender(sender, eOpts)
{
parent.down('tabpanel').items.getAt(0).on('click', function(){
alert('Hello World');
});
}
Thanks everyone
Follow On Issue:
I am having one more issue with setting the active tab. When the button is click it creates the new tab not issue, but when I call setActiveTab it appears to do nothing. When I stepped through it in Chrome I can see it is actually changing the tab to the specified one but then switching it back to the original. Any help would be great. Any idea's?
I have created a fiddle which demonstrates how to add tabs dynamically on click, the code is also listed below in case the link breaks. In the code below, the significant thing is adding the listener to the tabConfig
Ext.application({
name: 'Fiddle',
launch: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 800,
height: 400,
renderTo: document.body,
items: [{
title: 'Click me to add another tab',
tabConfig: {
listeners: {
click: function(tab) {
alert("Adding another tab");
var newTab = tabPanel.add({
// we use the tabs.items property to get the length of current items/tabs
title: 'Tab ' + (tabPanel.items.length + 1),
html: 'Another one'
});
}
}
}
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
}
});
Most of this code was taken from the documentation here
In a form, that have a couple of text items and a button, it's possible to know in which item the focus was before the click in the button?
I want to open another form, in a button click, and this form have a "context" that depends in the focus of the previous form.
Any thoughts?
EDIT
I tried to hold the last focused element in the controller, binding the blur event of all fields, but it seems that this event is not synchronized in IE (always he), Chrome and FF seems ok with that.
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
id: 'MyController',
views: [
'MyView'
],
init : function(application){
var me = this;
me.lastFocus = null;
me.control({
'.field' : {
blur: me.fieldBlur,
scope: me
}
});
},
fieldBlur: function(field, event, opts) {
this.lastFocus = field;
//console.log('lastFocus: ' + field);
}
});
I never tried it myself but Ext.FocusManager.focusedCmp looks promising. Note that you will need to activate it before you can use it by calling Ext.FocusManager.enable()
Edit
I thought it would be more stable by now. I am sorry to hear that it seams not to help you but I can not understand why the focusedCmp should be undefined on time you are clicking the button it should be the button. And with that I come to my error you need to access previousFocusedCmp.
But it should work cause what it does it no magic...
A little example JSFiddle:
Ext.FocusManager.enable();
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
console.log('Most likely the button you clicked: ', Ext.FocusManager.focusedCmp, 'The Component that was focused before: ',Ext.FocusManager.previousFocusedCmp );
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
How does the FocusManger do it in one sentence (we spare the keynav):
Well as soon as he get's enabled he queries the whole DOM for all
focusable components and tell each of them to inform him about focus and blur
changes.
From the persective of a user this sounds a bit shady, but whatever here you go:
use jQuery mouseover on each of the forms and where it sets some global variable to itself or a respective string, when the button is called the variable contains the last active field.
something like
var last_active = 0;
function set_last_active(e, ui){
last_active = $(this);
}
$('.tracked_form').mouseover(set_last_active);
should do the trick, also see if you can use event bubbling.
The proposal of using blur event in the form fields works in the button if you delay the access to my lastFocus attribute.
onButtonClick : function(button, e, eOpts) {
var me = this;
setTimeout(function(){
alert(me.lastFocus.getItemId());
}, 250);
}
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>';
}
});
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.