Ext.define('CCCC.view.Header', {
extend: 'Ext.toolbar.Toolbar',
requires: ['CCCC.view.header.MasterLogo',
'Ext.button.Button'],
alias: 'widget.mainheader',
itemId : 'header',
width: '100%',
height: 100,
renderTo: document.body,
initComponent: function() {
var me = this;
me.items = [
{
xtype: 'tbfill'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Logout',
itemId: 'logout',
listeners: {
handler: function() {
var me = button.up('WidgetName');
me.fireEvent('logoutClicked', button, e);
Ext.log('logout clicked');
}
}
},
i have added the logout button to the toolbar as xtype. it is showing as lable , not able to click the "logout" button. Please let me know why "logout" button is not clickable ?
The handler should be in the button config, not in the button's listener config:
{
xtype: 'button',
text: 'Logout',
itemId: 'logout',
handler: function() {
var me = button.up('WidgetName');
me.fireEvent('logoutClicked', button, e);
Ext.log('logout clicked');
}
}
Alternatively, if you want to use a listener, you should listen to the click event instead:
{
xtype: 'button',
text: 'Logout',
itemId: 'logout',
listeners: {
click: function() {
var me = button.up('WidgetName');
me.fireEvent('logoutClicked', button, e);
Ext.log('logout clicked');
}
}
}
Related
I'm keep facing with a issue to choice exact component with scope. As you'll notice below I've created 2 different functions inside gridpanel. One of those creates a Ext.MessageBox for confirm. And other function creates a Ext.window.Window depends on button click of MessageBox.
The thing here is; It should destroy related component with cancel and no buttons. Both buttons always point to gridpanel because of var me = this state and destroys the gridpanel itself.
How can I point destroy method directly to related component?
Ext.define('MyApp.FooGrid', {
extend: 'Ext.grid.Panel',
reference: 'fooGrid',
getGridMenu: function () {
// Here is the 'Update' function; with right-click user being able to see `contextmenu`
var me = this;
var ret = [
{
text: 'Update',
listeners: {
click: me.onUpdate,
scope: me
}
}
];
return me.callParent().concat(ret);
},
onUpdate: function () {
var me = this,
gridRec = this.getSelectionModel().getSelection(); // Here being able to retrieve row data.
Ext.MessageBox.confirm(translations.confirm, translations.confirmChange, me.change, me);
return gridRec;
},
change: function (button) {
var me = this;
var selectedRec = me.onUpdate();
var selectedRecEmail = selectedRec[0].data.email; //Retrieves selected record's email with right-click action
if (button === "yes") {
return new Ext.window.Window({
alias: 'updateWin',
autoShow: true,
title: translations.update,
modal: true,
width: 350,
height: 200,
items: [
{
xtype: 'container',
height: 10
},
{
xtype: 'textfield',
width: 300,
readOnly: true,
value: selectedRecEmail //Display selected record email
},
{
xtype: 'textfield',
width: 300,
fieldLabel: translations.newPassword
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: translations.cancel,
listeners: {
click: function () {
me.destroy(); // Here is the bug: When user clicks on this button; should destroy current window but it destroys 'gridpanel' itself
}
}
},
{
xtype: 'button',
text: translations.save,
listeners: {
click: function () {
console.log("I'll save you!");
}
}
}
]
}
]
});
} else {
console.log('this is no!');
me.destroy(); // Another bug raises through here: If user will click on No then 'messagebox' should destroy. This one is destroys the gridpanel as well.
}
}
});
How can I point destroy method directly to related component?
Firstly on confirmation box button's(No) click, you don't need to destroy it will automatically hide the box whenever you click into No.
And for update window instead of using me.destroy() you need to use directly button.up('window').destroy() so it will only destroy your update window not the grid.
And also you don't need to again call me.onUpdate() inside of change function otherwise it will again show the confirmation box. You can directly get selected record on the change function like this me.getSelection().
In this Fiddle, I have created a demo using your code and I have put my efforts to get result.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'demostore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Demo GRID',
store: 'demostore',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
listeners: {
itemcontextmenu: function (grid, record, item, index, e, eOpts) {
e.stopEvent();
grid.up('grid').getGridMenu().showAt(e.getXY());
}
},
renderTo: Ext.getBody(),
getGridMenu: function () {
var me = this;
if (!me.contextMenu) {
me.contextMenu = Ext.create('Ext.menu.Menu', {
width: 200,
items: [{
text: 'Update',
handler: me.onUpdate,
scope: me
}]
});
}
return me.contextMenu;
},
onUpdate: function () {
var me = this;
Ext.MessageBox.confirm('Confirmation ', 'Are your sure ?', me.change, me);
},
change: function (button) {
var me = this,
selectedRecEmail = me.getSelection()[0].data.email; //Retrieves selected record's email with right-click action
if (button === "yes") {
return new Ext.window.Window({
autoShow: true,
title: 'Update',
modal: true,
width: 350,
height: 200,
items: [{
xtype: 'tbspacer',
height: 10
}, {
xtype: 'textfield',
width: 300,
readOnly: true,
value: selectedRecEmail //Display selected record email
}, {
xtype: 'textfield',
inputType:'password',
width: 300,
fieldLabel: 'New Password'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'cancel',
listeners: {
click: function (btn) {
btn.up('window').destroy(); // Here is the bug: When user clicks on this button; should destroy current window but it destroys 'gridpanel' itself
}
}
}, {
xtype: 'button',
text: 'save',
listeners: {
click: function () {
console.log("I'll save you!");
}
}
}]
}]
});
}
}
});
}
});
I've defined DragZone as:
var menuItems = panel.query('.menuitem');
Ext.each(menuItems, function (component) {
component.DragZone = Ext.create('Ext.dd.DragZone', component.getEl(), {
getDragData: function (e) {
var compEl = component.getEl(),
cloneEl;
cloneEl = compEl.dom.cloneNode(true);
cloneEl.id = Ext.id();
return {
ddel: cloneEl,
repairXY: Ext.fly(e.getTarget()).getXY(),
componentClone: component.cloneConfig()
};
},
getRepairXY: function () {
return this.dragData.repairXY;
},
ddGroup: 'auGroup'
});
});
Where menus are menuitems from panel:
xtype: 'panel',
title: 'Geometry Controls',
items: [
{
xtype: 'menu',
floating: false,
itemId: 'geometryControlsMenu',
defaults: {
height: 20
},
items: [
{
xtype: 'menuitem',
itemId: 'angles',
text: 'Angles',
iconCls: 'icon-apgo'
},
{
xtype: 'menuitem',
itemId: 'coordinatePlane',
text: 'Coordinate Plane',
iconCls: 'icon-apgo'
}
Dragging is working but I have problems with displaying dragging items, it look like it has been croped:
But if I'll change dragsource from menuitem to menu itself:
var menuItems = panel.query('.menu');
displaying works ok:
How could I fix this?
component.DragZone.resizeFrame= true;
In the below ExtJS 4.2.2 code, you can click repeatedly on the "Search" and "Show Label" controls, and the label "here is the text" will toggle visible/hidden.
But if you click in the search text input field, the label is only hidden the first time you click there. If you then click "Show Label" to once again display the label, and then again click the search text input field, the label if not hidden.
Ext.define('MyToolbar', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.myToolbar',
requires: ['Ext.grid.feature.Feature'],
width: 160,
init: function () {
if (this.grid.rendered)
this.onRender();
else{
this.grid.on('render', this.onRender, this);
}
},
onRender: function () {
var panel = this.toolbarContainer || this.grid;
var tb = panel.getDockedItems('toolbar[dock="top"]');
if (tb.length > 0)
tb = tb[0];
else {
tb = Ext.create('Ext.toolbar.Toolbar', {dock: 'top'});
panel.addDocked(tb);
}
this.createSearchBox(tb);
},
createSearchBox: function (tb) {
tb.add({
text: 'Search',
menu: Ext.create('Ext.menu.Menu'),
listeners: {
click: function(comp) {
MyApp.app.fireEvent('onGridToolbarControlClicked', comp);
}
}
});
this.field = Ext.create('Ext.form.field.Trigger', {
width: this.width,
triggerCls: 'x-form-clear-trigger',
onTriggerClick: Ext.bind(this.onTriggerClear, this)
});
this.field.on('render', function (searchField) {
this.field.inputEl.on('click', function() {
MyApp.app.fireEvent('onGridToolbarControlClicked', searchField);
}, this, {single: true});
}, this, {single: true});
tb.add(this.field);
}
});
Ext.define('MyPage', {
extend: 'Ext.container.Container',
alias: 'widget.myPage',
flex: 1,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [{
xtype: 'button',
text: 'Show Label',
handler: function(comp) {
comp.up('myPage').down('label').setVisible(true);
}
},{
xtype: 'label',
itemId: 'testLbl',
text: 'here is the text'
},{
xtype: 'gridpanel',
width: 250,
height: 150,
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{name: 'one'},
{name: 'two'},
{name: 'three'}
]
}),
columns: [{
text: 'Text',
flex: 1,
dataIndex: 'name'
}],
features: [{
ftype: 'myToolbar'
}]
}]
}]
});
me.callParent(arguments);
MyApp.app.on({onGridToolbarControlClicked: function(comp) {
if('function' == typeof comp.up && !Ext.isEmpty(comp.up('myPage')) &&
'function' == typeof comp.up('myPage').down &&
!Ext.isEmpty(comp.up('myPage').down('label'))) {
comp.up('myPage').down('label').setVisible(false);
}
}});
}
});
Ext.onReady(function() {
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
layout: 'fit',
items: [{
xtype: 'myPage'
}]
});
}
});
});
Here
this.field.inputEl.on('click', function() {
MyApp.app.fireEvent('onGridToolbarControlClicked', searchField);
}, this, {single: false});
instead of {single:true} in your code. onRender IS single, onClick - (in your case) is not.
i use a tab panel in extjs. I want to display an alert when clicked on a tab. But i am not sure how.
This is what i do now:
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'All',
items: [grid]
},
{
xtype: 'panel',
title: 'Closed'
},
{
xtype: 'panel',
title: 'Open'
}
],
listeners: {
click: function () {
alert('test');
}
}
}
How can is display All, Closed or Open when there is clicked on that tab?
There is no event for tab click in TabPanel, however you can bind into click event on each tab:
Ext.createWidget('tabpanel', {
items: [...],
listeners: {
render: function() {
this.items.each(function(i){
i.tab.on('click', function(){
alert(i.title);
});
});
}
}
});
Notice: this is ExtJS 4 based code.
I manage to do this by using tabchange event. In example below I used newCard.xtype property where value of xtype (i.e. task-archive) is just my panel with controls and corresponding xtype property.
Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#tabWorks': {
tabchange: this.doTest
}
});
},
doTest: function ( tabPanel, newCard, oldCard, eOpts) {
switch (newCard.xtype) {
case "task-archive":
console.log("task-archive");
break;
case "task-creation":
console.log("task-creation");
break;
}
}
});
In my toolbar there is checkbox used for enabling and disabling tooltip. If the checkbox is checked then I should enable tooltip and it is working if not then I should disable it also working. After disabling tooltip, when click on toolbar not on any item in the toolbar then also it is enabling.
toogleTooltip is a handler of checkbox
function toggleTooltip() {
debugger;
if (Ext.getCmp("msai_tool_tip").checked) {
Ext.QuickTips.enable();
while (!Ext.QuickTips.isEnabled())
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
while (Ext.QuickTips.isEnabled())
Ext.QuickTips.disable();
}
}
This is my toolbar creation code:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
id: 'form_menu_bar',
renderTo: Ext.get('newproducttitle').dom,
items: [{
tooltip: {
text: "Click on this button to generate the template and save it in server.",
title: "Save",
xtype: "quicktip"
},
iconCls: 'msai_save_template',
handler: generateTemplate
}, {
tooltip: {
text: "Click on this button to generate the template.",
title: "Save to clipboard",
xtype: "quicktip"
},
iconCls: 'msai_save_clipboard',
handler: generateTemplateClipboard
}]
});
Please suggest some solution so that I should not show tooltip, if user click on toolbar not in any item.
Please find the below fiddle to check working example:
https://fiddle.sencha.com/#view/editor&fiddle/2c7k
Code snippet:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [{
// xtype: 'button', // default for Toolbars, same as 'tbbutton'
text: 'Button',
tooltip: 'button'
}, {
xtype: 'splitbutton', // same as 'tbsplitbutton'
text: 'Split Button',
tooltip: 'Split Button'
}, {
xtype: 'checkbox',
boxLabel: 'enable tooltip',
checked: true,
listeners: {
check: function (checkbox, newValue, oldValue) {
if (newValue) {
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
}
}
}
}]
});