Develop Reference

Is there any other way to place "Close Tooltip" to default close button in the panel header in extjs?

I am using extjs for my project. There is a default close button on the upper right side for every panel. I am able to put tooltip for the button using its position.
function closeTooltip (window, 1) {
Ext.create('Ext.tip.ToolTip', {
target: window.header.items.get(1).el,
html: 'Close'
});
But, this isn't so cool because, if I add a button to the header then the position of the close button changes from 1 to 2. So, the tooltip gets displayed for the newly added button.
Is there any other way to keep close tooltip to close button that remains same ?

For getting your close button, you can use down method of Ext.dom.Element.
The down method selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
In this FIDDLE, I have created a demo using panel. I have tested in ExtJS 4.x and later versions, it's working fine. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
function closeTooltip(panel) {
if (Ext.getVersion().major > 5) {
Ext.getCmp(panel.el.down('.x-tool-close').up().id).setTooltip('close')
} else {
Ext.create('Ext.tip.ToolTip', {
target: panel.el.down('.x-tool-close').id,
html: ' Close '
//If you want to put diffrent-diffrent tooll tip then you can use below
//html:`Close ${panel.title}`
});
}
}
Ext.define('CustomPanel', {
extend: 'Ext.panel.Panel',
width: 200,
bodyPadding: 10,
margin: 5,
html: 'Custom panel used',
closable: true,
tools: [{
type: 'help',
handler: function () {
alert('help');
}
}],
listeners: {
afterrender: closeTooltip
}
});
Ext.create('CustomPanel', {
title: 'Panel 1',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 2',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 3',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 4',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 4',
renderTo: Ext.getBody()
});
}
});

ExtJS Toolbar: how keep an item always directly accesible, never put in the "more" menu

I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?

Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2

I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.

javascript EXTJS close & reset

The previous programmer used EXTJS, with which I don't have a whole lot of familiarity with.
The application I am trying to fix has a modal called ADD ACCOUNT, with which a user can either manually type the various input fields or drag and drop an account already open into the modal.
The user can hit a reset button and clear the fields. However, if they don't clear the fields and they just close the window, when the window is reopened, the previous data is still there.
Basically, if the user decides to close the window, it needs to also reset and clear all the fields.
As stated, I am not too familiar with EXTJS. With that said, I will include the code below, which may be a lot. I will try not to include unnecessary code.
There are 2 files: accountGrid.php and accountGrid.js
I have isolated where I think the issue begins in accountGrid.js. Here is what I've found:
function addAccount(){
var AddAccountForm;
var fields = [
{name: 'must_have', mapping: 'must_have'},
{name: "*** there are like 50 of these, so I'll skip the rest ***"}
];
AddAccount = new Ext.FormPanel({
autoScroll: true,
monitorValid: true,
defaultType: 'textfield',
items:
[
{
xtype: 'fieldset',
title: 'Required Information',
collapsible: true,
autoHeight: true,
defaultType: 'textfield',
items: [*** random fields here ***]
},
{
xtype: 'fieldset',
title: 'Optional Information',
collapsible: true,
collapsed: true,
autoHeight: true,
defaultType: 'textfield',
items: [*** random fields here ***]
}
],
buttons: *** this is where the buttons being ***
[
{
text: 'Submit',
id: 'submitAdd',
formBind: true,
handler: function(){
AddAccountForm.getForm().submit({
url: 'data-entry.php', *** hope I don't need to show this file's code ***
waitMsg: 'Updating Record...',
success: function(form, action){
obj = Ext.util.JSON.decode(action.response.responseText);
AddAccountForm.getForm().reset(); *** notice this reset function ***
delete BookingDataStore.lastParams;
BookingDataStore.removeAll();
var sa = Ext.getCmp('salesArea').getValue();
*** there are few more of these var sa fiels ***
BookingDataStore.on('beforewrite', function(store, options){
Ext.apply(options.params, {
task: 'LISTING',
salesarea: sa,
*** there are a few more of these variables ***
*** honestly, I'm not sure what these are ***
});
});
BookingDataStore.reload();
Ext.Msg.alert('Success', 'The record has been saved.');
AddAccountWindow.close();
},
failure: function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error','Your account was not submitted.'+obj['error']);
}
else{
Ext.Msg.alert('Warning','There server is unreachable: ' +action.response.responseText);
}
}
});
}
},
{
text: 'Reset', *** here is the reset ***
handler: function() {AddAccountForm.getForm().reset();}
},
{ *** 2ND EDIT ***
text: 'Close',
AddAccountForm.getForm().submit({
handler: function() {
Ext.Msg.alert('close');
};
});
} *** 2ND EDIT CONTINUED BELOW ***
],
keys: [{
key: [10,13], fn: function(){
var b = Ext.getCmp('submitAdd');
b.focus();
b.fireEvent("click", b);
}
}]
});
AddAccountWindow = new Ext.Window({
title: 'Add Account',
closable: true,
closeAction: 'close',
y: 5,
plain: true,
layout: 'fit',
stateful: false,
items: AddAccountForm
});
AddAccountWindow.show(this);
}
That was what I think is the major portion of the accountGrid.js. There was some more code for the drag and drop feature, but that was not necessary for me to display.
I did not think this code was this long. I haven't even gotten to the php file code. SMH.
Here is the code from accountGrid.php:
var AddAccountForm = new Ext.FormPanel({
id: 'AddAccountForm',
autoScroll: true,
monitorValid: true,
submitEmptyText: false,
defaultType: 'textfield',
items:
[
{
xtype: 'fieldset',
id: 'reqFieldSet',
title: 'Required Information',
*** there are more parameters, I'll skip to the buttons ***
}
],
buttons:
[
{
text: 'Submit',
id: 'submitAdd',
formBind: true,
handler: function(){
var pc = partnerCodeField.getValue();
var pn = partnerNameField.getValue();
AddAccountForm.getForm().submit({
url: 'data-entry.php',
waitMsg: 'Updating Record....',
params: {partner_code:pc, partner_name:pn},
success: function(form, action){
obj = Ext.util.JSON.decode(action.response.responseText);
AddAccountForm.getForm()reset();
delete BookingDataStore.lastParams;
BookingDataStore.removeAll();
BookingDataStore.on('beforeload', function(store, option){
Ext.apply(options.params, {
ns_task: "SEARCHING"
});
});
BookingDataStore.load();
TradeTotalsDataStore.reload();
Ext.Msg.alert('Success','The record has been saved.');
AddAccountWindow.hide();
},
failure: function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error','Your account was not submitted.'+obj['error']);
}
else{
Ext.Msg.alert('Warning','The server is unreachable:'+action.response.responseText);
}
}
});
}
},
{
text: 'Reset',
handler: function(){
AddAccountForm.getForm().reset();
partnerCodeField.enable();
partnerNameField.enable();
}
}, *** 2ND EDIT ***
{
text: 'Close',
handler: function(){
AddAccountForm.getForm().reset();
AddAccountWindow.close();
partnerCodeField.enable();
partnerNameField.enable();
}
} *** END 2ND EDIT ***
],
keys:
[
{
key: [10, 13], fn: function(){
var b = Ext.getCmp('submitAdd');
b.focus();
b.fireEvent("click", b);
}
}
]
});
var AddAccountWindow = new Ext.Window({
title: 'Add Account',
closeable: true,
closeAction: 'hide',
y: 5,
plain: true,
layout: 'fit',
stateful: false,
items: AddAccountForm
});
I just saw this immediately after the code directly above:
function addAccount(){
AddAccountWindow.show(this);
*** beneath this is code for the drag & drop features ***
*** I don't think I need to show that ***
}
I'm not sure why the code from accountGrid.php and accountGrid.js look similar. I apologize for the amount of code. I just really need help breaking this code down.
Just to reiterate, when they click the X button at the top-right of the window, it needs to clear the modal form and then close.

You have a window with a child named accountform.
What you want to do is add a listener for the close button of the window and add code to clear your form.
You already have this:
new Ext.Window({
closable: true, //adds the close button
closeAction: 'close', //'close' isn't supported (use 'hide')
Add a listener to it:
{
//....
closable: true,
listeners: {
close:function(){
//put clear form code here
}
}
}
Add code to clear the form:
AddAccountForm.getForm().reset(true)
Finally it looks someting like this:
var AddAccountWindow = new Ext.Window({
title: 'Add Account',
closeable: true,
closeAction: 'hide',
y: 5,
plain: true,
layout: 'fit',
stateful: false,
items: AddAccountForm,
listeners: {
close:function(){
AddAccountForm.getForm().reset(true);
}
}
});

how to close plugin dialog with tinymce 4.0b3

I'd like to close the dialog within the onclick function of the first button, I've tried running the close() function that I've found on the windowManager object through console.log but it doesn't work.
when I do:
console.log(editor.windowManager);
I see the following output:
Object {windows: Array[1], open: function, alert: function, confirm: function, close: function}
and then I call that close function you see in the output above like so
editor.windowManager.close();
and then I get:
Uncaught TypeError: Cannot call method 'close' of undefined
here is my code
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}]
})
}
});

You can close the popup like so:
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: editor.windowManager.close()
}]
})
}
});
Looking at the provided plugins, the more common way it to assign editor.dom to a var and call close on that, like so:
var win = editor.dom
...
win.close()

How do i get a class instance in Extjs?

I defined a class 'IMS.SellMgt.testForm'.when i click the button 'submit',i want to get 'var test = this.formPanel;',why test is null? if i want to get this.formPanel,how can i do?Thank you!
Ext.define('IMS.SellMgt.testForm', {
formPanel: null,
LoadForm: function () {
this.formPanel = new Ext.form.Panel({
renderTo: 'form-ct',
frame: true,
title: 'XML Form',
width: 300,
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}
]
}],
buttons: [{
text: 'Submit',
handler: function () {
var test = this.formPanel;
}
}]
});
}
});
Ext.onReady(function () {
var frmTest = Ext.create('IMS.SellMgt.testForm', {});
frmTest.LoadForm();
});

try something like:
......
handler: function () {
var test = this.findParentByType(Ext.form.FormPanel);
}
....

handler is a simpler way of specifying a click event listener for the button. Since it is short hand, it has some drawbacks.
With handler, the context of the function is always the button. In other words, this inside the handler function is the button, not your form.
In order for this to be your class, use a listener with a scope specified:
buttons: [{
text: 'Submit',
listeners: {
click: function() {
this.formPanel; // will work now
...
},
scope: this // this is the key
}
}]
You can also use up to find the form:
handler: function() {
var form = this.up('form');
...
}