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>';
}
});
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
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.
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);
}
I am new to extjs....
I am trying to add icons to the title bar of a window.
I am not able to figure out the error in my code
i tried using tools config for the window
Here is my code:
**Ext.ns('DEV');
DEV.ChartWindow = Ext.extend(Ext.ux.DEV.SampleDesktopWidget, {
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
initComponent : function() {
this.items = [
new Ext.Panel({
border:true,
html : '<iframe src="" width="100%" height="100%" ></iframe>'
})
];
DEV.ChartWindow.superclass.initComponent.apply(this, arguments);
},
getConfig : function() {
var x = DEV.ChartWindow.superclass.getConfig.apply(this, arguments);
x.xtype = 'DEV Sample Window';
return x;
},
tools: [{
id:'help',
type:'help',
handler: function(){},
qtip:'Help tool'
}]
});
Ext.reg('DEV Sample Window', DEV.ChartWindow);**
SampleDesktopWidget is an extension of Window
Can somebody help me with this
Thanks in advance
I believe title is part of the header. I dont think you can do this with initialConfig programmatically but you can either override part of component lifecycle or hook in with an event. E.g. add this to config. You might (probably) be able to hook in at any early stage after init maybe, but thats an experiment for you.
listeners: {
render: {
fn: function() {
this.header.insert(0,{
xtype: 'panel',
html: '<img src="/img/titleIcon1.gif"/>'
});
}
}
}
However for this particular scenario I would use iconCls
iconCls: 'myCssStyle'
Then include a CSS file with:
.myCssStyle {
padding-left: 25px;
background: url('/ima/titleIcon.gif') no-repeat;
}
This is a good example that might help, using extjs 3.2.1.
Adding tools dynamically