How do I add a text beside the icon in Extjs Panel tool type?
Example:
Below code displays print icon at top right corner of the Panel.
tools : [
{
type: 'print',
// text : 'Print document',
handler : function(){
Ext.Msg.alert('print', 'you clicked print icon');
}
}
]
I like it to render it as ["print icon" space "Print document"]
I don't think you can write a text to a tool (well you could "hack" it using CSS). But you can create custom header for your panel and put a button there.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
height: 250,
width: 400,
header: {
title: 'My Panel',
items: [{
xtype: 'button',
text: 'Print Document',
iconCls: 'x-fa fa-print'
}]
}
});
Working fiddle https://fiddle.sencha.com/#view/editor&fiddle/1qit
We have a config iconAlign : String possible inputs are'top'
'right'
'bottom'
'left'`
Related
I want to remove the active tab from sencha ext.
Assume that am into controller file of the view.
Note: I have used remove() as well as destroy().
destroy() function works fine but tab header is not getting removed.
coseResultTab() {
this.getView().destroy();
}
Before Clicking on Cancel button:
After Clicking on Cancel button
You should destroy the active tab in your tabpanel, eg:
Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
destroyTab: function() {
this.getView().down('tabpanel').getActiveTab().destroy();
}
});
View
Ext.create('Ext.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Panel',
id: 'myPanel',
controller: 'myview',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Foo',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}, {
title: 'Bar',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}]
}]
});
Fiddle
I enhanced the answer from Matheus to meet the requirement a bit more:
not destroying the entire tab, but only the content
setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
removed the outer panel which only added a title
Fiddle
You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);
https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab
I am trying to create a layout that has a title bar and a tab bar just right below it.
I know how to assign a simple html text in each tab and I made it work when I just use tab bar without the title bar. It's as follows:
Ext.define('MyThirdApp.view.Feed', {
extend: 'Ext.TabPanel',
xtype: 'feedcard',
config:{
tabBar: {
layout: {
pack: 'center'
}
},
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'tab1',
html: 'this is tab 1'
},
{
title: 'tab2',
html: 'here is tab2!'
},
{
title: 'tab3',
html: 'here is tab3!'
}
]
}
});
It works fine. Then I tried to add a title bar on top of it by defining another view and adding this tab bar in it
Ext.define('MyThirdApp.view.Main', {
fullscreen: true,
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'MyThirdApp.view.Feed'
],
config: {
items:[
{
xtype: 'titlebar',
title: 'The main title',
},
{xtype: 'feedcard'}
]
}
});
and it shows the title bar with just the tab bar below it. It doesn't show any html even when I click on all the different tabs. I have no idea why this happens or what I did wrong, and I tried playing with the layout and the extend: property of MyThirdApp.view.Main, changing it to Container or Panel, none works. I tried looking around at the Kitchensink example from Sencha but I found no part of the code that defines the title bar in their Tab bar UI source. Any help would be appreciated, thank you.
Try adding layout: 'fit' in your main view:-
Ext.define('MyThirdApp.view.Main', {
fullscreen: true,
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'MyThirdApp.view.Feed'
],
config: {
layout: 'fit',
items:[
{
xtype: 'titlebar',
title: 'The main title',
},
{xtype: 'feedcard'}
]
}
});
Set layout: 'fit' for your Main view.
I can add my own button to the built-in tools "Help" etc on the panel header:
tools:[
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}],
header: {
layout: {
type: 'hbox',
align: 'right'
},
items: [{
xtype: 'button',
text: 'test'
}]
} ...
but button 'test' appears far left before the panel title ... header layout hbox right obviously not the way to do it :-). Button 'test' just a placeholder - I want to eventually add a menu button - so another css tool would not work - is there a simple way of doing this or do I need to use dom element positiong etc? tia.
If you're using ExtJS 4.2, you can use the titlePosition property to accomplish this. See http://jsfiddle.net/U8MSd/
tools: [{
type: 'help',
tooltip: 'Get Help',
handler: function (event, toolEl, panel) {
// show help here
}
}],
header: {
titlePosition: 0,
items: [{
xtype: 'button',
text: 'test'
}]
}
i define a treeGrid with plugin CellEditing like
Ext.define('MyExample', {
extend: 'Ext.tree.Panel',
id: 'example',
alias: 'example',
....
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(plugin, edit){
alert('don't run second time');
}
}
})
],
...
And i have a button when i click this button will call below window (this window has treeGrid above)
Ext.create('Ext.window.Window', {
title: 'Phân xử lý',
modal:true,
height: 500
width: 500
layout: 'border',
...
item[
{
title: 'example',
region: 'center',
xtype: 'example', // that here
layout: 'fit'
}
]
Everything working at first time but when i close the window at first time and click button to call window again then CellEditting still working but listeners not working ?
How to fix that thanks
EDIT
Please see my example code in http://jsfiddle.net/E6Uss/
In first time when i click button. Everything working well like
But when i close Example window and open it again I try click to blocked cell again i get a bug like
How to fix this bug? thanks
The problem here is that you are using Ext.create inside the plugins array for the tree grid. This have the effect of creating it once and attaching the result adhoc to your defined class.
If you close the window, all the resources within the window are destroyed. The second time you instantiate the tree panel, the plugin is not there. Take a look at this fiddle : I see what your issue is. Take a look at http://jsfiddle.net/jdflores/E6Uss/1/
{
ptype : 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(plugin, edit){
console.log('EDITOR');
if (edit.record.get('block')) {
alert('this cell have been blocked');
return false;
}
}
}
}
You're recreating the window on every click of the button. This recreation may be messing with your configuration objects or destroying associations or references within them, or something similar. Try to reuse the window everytime by replacing your button code with something like:
Ext.create('Ext.Button', {
text: 'Click me',
visible: false,
renderTo: Ext.getBody(),
handler: function(button) {
if(!button.myWindow)
{
button.myWindow = Ext.create('Ext.window.Window', {
title: 'Example',
height : 300,
width : 500,
layout: 'border',
closeAction: 'hide',
items: [{
region: 'center',
floatable:false,
layout:'fit',
xtype: 'example',
margins:'1 1 1 1'
}
]
});
}
button.myWindow.show();
}
});
Maybe it needed complete the editing cell, try finish it:
...
beforeedit: function(plugin, edit){
alert('don't run second time');
plugin.completeEdit();
}
Sencha: CompleteEdit
I put together a working example here: http://jsfiddle.net/jdflores/6vJZf/1/
I think the problem with your column is that it's dataIndex is expecting that the editor value be a boolean type (because 'block' was set as datIndex instead of 'date'). I assume you are using the 'block' field just to identify which are blocked to be edited. I modified the fidle provided here: http://jsfiddle.net/jdflores/6vJZf/1/
{
text: 'Block Date',
dataIndex: 'date',
xtype: 'datecolumn',
format: 'd/m/Y',
editor: {
xtype: 'datefield',
allowBlank: true,
format: 'd/m/Y'
}
}
I have a toolbar with some buttons and one of the buttons needs to be invisible at creation and visible at some point in my app.
I'm currently adding the button when it needs to be visible but that is not exactly what I want.
When you create the button you can set hidden: true in the config.
Or you can 'hide()' the button soon after adding it and then 'show()' it at a later date.
find the button and make it invisible
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
items: [
{
text: 'Button',
id: 'my-btn',
hidden: true
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});