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'
}
]
});
Related
I have a toolbar with buttons that are hidden by default, and then shown based on the user's privileges. They appear and function after I call .show(), but do not appear in the overflow menu when the window is resized. The items that are initially shown appear in the overflow menu correctly.
Any advice on how I can fix this problem?
Thanks
Edit: Here's the simplest example I could come up with that works with fiddle for the problem. https://fiddle.sencha.com/#fiddle/877
Ext.onReady(function(){
var toolbar1 = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'textfield',
emptyText: 'FIX ME'
},{
xtype: 'button',
text: 'Test Lists',
id: 'testListsButton',
hidden: true
},{
xtype: 'button',
text: 'All Lists',
id: 'allListsButton',
},{
xtype: 'button',
text: 'Other Lists',
id: 'otherListsButton',
hidden: true
},{
xtype: 'button',
text: 'Email Lists',
id: 'emailListsButton',
hidden: true
}]
});
Ext.getCmp('emailListsButton').show();
Ext.getCmp('otherListsButton').show();
Ext.getCmp('testListsButton').show();
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
autoRender: true,
items: [
toolbar1
]
});
})
I found a work-around.
I set the items to be visible initially, hide them before they're rendered, and then show them again when checking the user's privileges. This properly displays the items in the overflow menu.
It looks like this is a bug, all be it a minor one.
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 have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items
I am new to sencha touch and I am trying to use the back button in my toolbar. I wish to toggle its visibility based on the User Agent detected. By default it is visible but if the user agent is detected as desktop I want to set hidden : true.
I cannot understand,
How to detect the UserAgent
How to toggle the visibility
Here is the code
myapp.views.SubSettings = Ext.extend(Ext.Panel, {
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
items: [ {
ui: 'back',
id: 'backButton',
text: 'Back',
handler : function () {
// this function should detect the User Agent and set visibility to false for back button
}
}
]
}]
For detecting the user-agent there is the Ext.is class
http://dev.sencha.com/deploy/touch/docs/?class=Ext.is
Example to set the visibility of a back button on Android with the hidden property:
myapp.views.SubSettings = Ext.extend(Ext.Panel, {
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
items: [{
ui: 'back',
id: 'backButton',
text: 'Back',
hidden: Ext.is.Android
}]
}];
Example if you want to check for the user-agent and set visibility inside the function
handler: function () {
if(Ext.is.Android) {
this.hide();
}
}
For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS
Like this with jQueryUI: http://jqueryui.com/demos/button/#radio
Thanks in advance,
Chielus
I think you should look at using a set standard ExtJS buttons. A button can be assigned to a group so that they act as the elements shown in your link.
See this example:
{
xtype: 'button',
text: 'Choice 1',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 2',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 3',
toggleGroup: 'mygroup'
}
Buttons also have a property called enableToggle, that allows them to toggle, and is automatically set to true when you set a toggleGroup, and toggleGroup tells ExtJS how they are related.
Note, they look like regular ExtJS buttons, but behave like you want.
There is a less complicated (better?) way to disallow deselecting a button. Set the allowDepress config option to false:
{
xtype: 'radiogroup',
layout: 'hbox',
defaultType: 'button',
defaults: {
enableToggle: true,
toggleGroup: 'mygroup',
allowDepress: false,
items: [
{ text: 'Choice 1'},
{ text: 'Choice 2'},
{ text: 'Choice 3'}
]
}
}
Just to answer #mastak's comment (in the answer above), in order to disallow the action of de-selecting a button, add this listener to each button:
listeners: {
click: function(me, event) {
// make sure a button cannot be de-selected
me.toggle(true);
}
}
That way, each click on a button will re-select it.
-DBG
Just adding to the #deebugger post. You can also use the following button property to not allow to deselect a selection
Ext.create('Ext.Button', {
renderTo : Ext.getBody(),
text : 'Click Me',
enableToggle : true,
allowDepress : false
});