I have put a confirm box on the logout option of my application. Code for the same is as follows:
var abc = Ext.Msg.confirm('Confirm logout', 'Are you sure you want to logout?', function(e)
{
if(e == 'yes')
{
// logout code
}
}
);
No button of the confirm box is visible before the yes button.
How can I display Yes button before the No Button?
Any help is appreciated.
According to the sencha touch source code ( http://docs.sencha.com/touch/1-1/source/MessageBox.html#Ext-MessageBox-method-confirm )
YESNO is defined as "no, yes":
(function(){
var B = Ext.MessageBox;
Ext.apply(B, {
OK : {text : 'OK', itemId : 'ok', ui : 'action' },
CANCEL : {text : 'Cancel', itemId : 'cancel'},
YES : {text : 'Yes', itemId : 'yes', ui : 'action' },
NO : {text : 'No', itemId : 'no'},
// Add additional(localized) button configs here
// ICON CSS Constants
INFO : 'x-msgbox-info',
WARNING : 'x-msgbox-warning',
QUESTION : 'x-msgbox-question',
ERROR : 'x-msgbox-error'
});
Ext.apply(B, {
OKCANCEL : [B.CANCEL, B.OK],
YESNOCANCEL : [B.CANCEL, B.NO, B.YES],
YESNO : [B.NO, B.YES]
// Add additional button collections here
});
})();
You can use Ext.override to override this functionality in your own app:
Ext.override(Ext.MessageBox, {
YESNO: [Ext.MessageBox.YES, Ext.MessageBox.NO]
});
You can override like the below code in ST2.1, Can also implement localization in YES/NO buttons using this.
Ext.MessageBox.override({
confirm: function(title, message, fn, scope) {
return this.show({
title : title || null,
message : message || null,
buttons : [
{text: 'Yes', itemId: 'yes', ui: 'action'},
{text: 'No', itemId: 'no'}
],
promptConfig: false,
scope : scope,
fn: function() {
if (fn) {
fn.apply(scope, arguments);
}
}
});
}
});
It is Very easy Try this
Ext.Msg.confirm("Logout", "Are you Sure u want to LogOut?", function(btn){
if (btn == 'yes'){
Ext.Viewport.setActiveItem({xtype:"Home"}); // which page wants to redirect
}
});
I tried this, and works for me:
Try this solution:
<script type="text/javascript">
(function () {
Ext.override(Ext.MessageBox, {
buttonText: { yes: "Sí", no: "No", cancel: "Cancelar" }
});
})();
</script>
Ext.Msg.show({
title: '提示',
message: '是否继续?',
width: 300,
buttons: [
{text: '是', itemId: 'yes', ui: 'action'},
{text: '否', itemId: 'no'}
],
fn: function (buttonId) {
alert('You pressed the "' + buttonId + '" button.');
}
});
Related
As the title says, I need to capture the change event of a tab and show to the user a confirm message box. I achieved this but using the confirm JS native function. I'd like to perform this using ExtJS's Ext.Msg.show(), but the program flow does not stop with this way, as it does with confirm function. See below the two ways:
'Ext.Msg.show()' way:
onBeforeTabChange: function(panel, nextTab, oldTab)
{
var bReturn = true;
if (null != oldTab)
{
if(AppGlobals.isEditing=='si')
{
Ext.Msg.show(
{
title: 'Warning',
msg: 'Leave without saving changes?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.WARNING,
closable: false,
buttonText:
{
yes : 'Yes, sure',
no : 'No, will save changes first'
},
fn: function (buttonId)
{
if(buttonId=="yes")
{
AppGlobals.isEditing = 'no';
bReturn = true;
}
else
{
bReturn = false;
}
}
});
}
else
{
bReturn = true;
}
}
return bReturn;
}
As I said before, the code above does not stop the program flow. The alert appears but the tab changes anyway.
'confirm' way:
onBeforeTabChange: function(panel, nextTab, oldTab)
{
var bReturn = true;
if (null != oldTab)
{
if(AppGlobals.isEditing=='si')
{
bReturn = confirm('Leave without saving changes?');
if(bReturn==true)
{
AppGlobals.isEditing = 'no';
}
}
else
{
bReturn = true;
}
}
return bReturn;
}
The code above do work, and the tab does not change until user clicks on "Yes".
Any help? Thanks in advance.
Ext.Msg.show() is asynchronous and doesn't stop execution of the rest of program. The solution would be always return false from beforetabchange listener and programmatically change the tab when user press Yes.
A Sample Code: Here i have used allowChange as flag to prevent showing of message box when tab is changed programmatically. You can use you own flag here which i suppose is AppGlobals.isEditing
Ext.application({
launch: function() {
var allowChange = false;
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [{
title: 'Tab 1',
bodyPadding: 10,
html: 'A simple tab'
},
{
title: 'Tab 2',
html: 'Another one'
}
],
renderTo: Ext.getBody(),
listeners: {
beforetabchange: function(tabPanel, nextTab, oldTab) {
var bReturn = true;
if (null != oldTab && !allowChange) {
bReturn = false;
Ext.Msg.show({
title: 'Warning',
msg: 'Leave without saving changes?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.WARNING,
closable: false,
buttonText: {
yes: 'Yes, sure',
no: 'No, will save changes first'
},
fn: function(buttonId) {
if (buttonId == "yes") {
allowChange = true; // to stop showing the message box again when tab is changed programmaticaly
tabPanel.setActiveTab(nextTab);
}
}
});
}
allowChange = false;
return bReturn; // always return false
}
}
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
I have the code below to create a text field in the form.
buildForm : function() {
this.time = new Ext.form.TextField({
name : 'estimate',
allowBlank : false,
fieldLabel : 'Estimate',
onBlur : function(field) {
return this.setValue(this.getValue().replace('.', ','));
}
});
}
It works correctly.
Now, when I render this form, and in this field is value="abc", I need to set disabled to this field.
I tried:
disabled : function() { return this.getValue() == 'abc' ? true : false;}
disabled : function(field) { return this.getValue() == 'abc' ? true : false;}
disabled : function(field) { return field.getValue() == 'abc' ? true : false;}
disabled : this.getValue() == 'abc' ? true : false
But nothing of this work. Any idea?
Try this
change: function(field, newValue,) {
field.setDisabled(newValue == 'abc');
}
Check API for more info on events, methods for TextField
UPD:
If you need to disable textfield only on form render, just add this line in buildForm function.
this.time.setDisabled(this.time.getValue() == 'abc')
Another way is to add logic on TextField's render event.
render: function(field) {
field.setDisabled(field.getValue() == 'abc')
}
UPD 2:
I suppose, that your issue is on way of setting value or in the order.
Here's a working sample.
Notice this.time.setValue('abc')
instead of this.time.value = 'abc', which won't work.
buildForm: function() {
this.timeFld = Ext.create('Ext.form.TextField', {
name: 'estimate',
allowBlank: false,
fieldLabel: 'Estimate',
onBlur: function(field) {
return this.setValue(this.getValue().replace('.', ','));
},
listeners: {
render: function(field) {
field.setDisabled(field.getValue() == 'abc');
}
}
});
this.timeFld.setValue('abc');
// this.time.setDisabled(this.time.getValue() == 'abc');
Ext.create('Ext.form.Panel', {
title: 'Test',
items: [
this.timeFld
],
renderTo: Ext.getBody()
});
// alert(this.timeFld.getValue());
}
I'm trying to add a QuickTip to a form field, but can't find a way to make my code work. Firstly, I tried to use a qtip attribute
{
fieldLabel: 'Last Name',
qtip:'This tip is not showing at all',
name: 'last'
}
and then using Ext.tip.ToolTip class:
Ext.create('Ext.tip.ToolTip', {
target: 'rating_field',
anchor: 'right',
trackMouse: true,
html: 'This tip is not showing at all'
});
Ext.QuickTips.init();
Here is a jsfiddle with the source code: jsfiddle
Yes, use the inputAttrTpl config and the data-qtip attribute:
{
fieldLabel: 'Last Name',
inputAttrTpl: " data-qtip='This is my quick tip!' ",
name: 'last'
}
I found the answer here: How should I add a tooltip to an ExtJS Component?
{
fieldLabel: 'Last Name',
qtip: "This is a tip",
name: 'last',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
});
}
}
}
Using vero4ka's answer I wrote a simple plugin which can be used with forms to enable quicktips on child fields.
Ext.define('Ext.form.QtipPlugin', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.qtipfields',
init: function (cmp) {
this.setCmp(cmp);
cmp.on('beforerender', function () {
var fields = cmp.query('field[qtip]');
for (var i = 0; i < fields.length; i++) {
fields[i].on('render', this.register, this);
}
}, this);
},
register: function (field) {
var obj = {
target: field.id
};
if (typeof field.qtip === 'string') {
obj.text = field.qtip;
} else if (typeof field.qtip === 'object') {
// Allow qtip configuration objects.
// i.e. qtip: { text: 'hi', ... }
Ext.applyIf(obj, field.qtip);
}
Ext.tip.QuickTipManager.register(obj);
}
});
For any form field, you can use this:
{
xtype: 'textfield', // or anything else
autoEl: {
'data-qtip': 'This is working tip!'
}
}
You can also use the built-in plugin datatip on a form panel.
in form panel (see http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html) :
in form config :
plugins = [{ptype : 'datatip'}]
in field text config :
tooltip : "my tooltip text"
If you are generating tooltip dynamically then you can use below snippet:
txtFieldName.el.set({ "data-qtip": Ext.String.htmlDecode("Some Text") });
I work with mvc. When i double click on a textfield it not listening.
But specialkey that means enter work perfectly. where is my fault.
Here is my text field
{
xtype : 'textfield',
name : 'articleName',
fieldLabel : 'Article',
allowBlank : false,
readOnly : true,
width : 253,
enableKeyEvents : true
}
and here is my controller
sv01t01000102 textfield[name=articleName]':{
specialkey: function (field, el) {
if (el.getKey() == Ext.EventObject.ENTER || el.getKey()==el.TAB){
console.log('World')
}
},
dblclick : function(field, el){
console.log('Hello')
}
}
Can you help me?
Field doesn't have a double click event. Typically you'll do something like:
textfield[name=articleName]': {
afterrender: function(c) {
c.inputEl.on('dblclick', function() {
console.log('double');
});
}
}
'textfield[name = articleName]':{
render: function (component) {
component.getEl().on('dblclick', function(event, el) {
alert('You dblclicked on textfield!');
})
}
}
Just in case somebody stumbles over this and want's to solve it in the MVVM way.
View
{
xtype: 'textfield',
listeners: {
afterrender: view => {
view.getTargetEl().on('dblclick', 'onDblclick');
}
}
}
Controller
onDblclick() {
console.log(arguments) // Pick what you need
}
I am newbie. I am working on EXTJS 4,need your help in solving this.
I am encountering an error
"TypeError: item is null
item.on(ename, fn, scope, options); ext-all-debug.js (line 13795)"
when clicking on the link, which calls the function doThis() and the tabpanel associated with function disappear. Below is the function for your reference.
function doThis()
{
var xxtabPanel = Ext.create('Ext.tab.Panel', {
renderTo : Ext.fly('content').update(""),
autoHeight:true,
id:'xxtabPanel',
tabHeight:200,
activeTab:0,
items : [ {
id:'tab1',
itemId:'Tab1',
frame:true,
title : 'Tab one Details',
items :item1 //FormPanel
}, {
id:'tab2',
frame:true,
itemId:'Tab2',
title : 'Tab two Details',
items:item2 //FormPanel
}, {
id:'tab3',
frame:true,
itemId:'Tab3',
title : 'Tab three Details',
items :item3 //FormPanel
} ],
listeners: {
'tabchange': function(tp, p) {
tp.doLayout();
}
}
});}
Thanks in advance..Looking forward to hear from you.