I have an ExtJS button like this:
new Ext.SplitButton({
text: 'Index',
iconCls: 'index',
scale: 'large',
iconAlign: 'left',
cls: 'header-item',
handler: leftPanelNav, // handle a click on the button itself
menu: new Ext.menu.Menu({
items: [
// these items will render as dropdown
// menu items when the arrow is clicked:
{text: 'Item 1'},
{text: 'Item 2'}
]
})
})
His state will be pressed at a time and I want to know how can I unpress it when I want to from script.
Thank you.
Call toggle() on the button:
http://www.extjs.com/deploy/ext/docs/output/Ext.SplitButton.html (dead link)
http://dev.sencha.com/playpen/docs/output/Ext.SplitButton.html
If a state it passed, it
becomes the pressed state otherwise
the current state is toggled.
Related
I have a panel which have 2 items, a start button and a save button.
the start button is at the bottom left corner
the save button is at the bottom right corner
the save button is hidden, when shown using show() the save button appears on top of the start button. If all these hide and show calls are removed the buttons rendered in the correct location, both of them.
Anyone know why this maybe ?
It is a straight up panel with items: [startbutton, spacer, savebutton]
Oh god I really hate this one framework..
You're probably confused about the layout management in ExtJS (which is actually quite nice once you understand how it works). Also you want to make sure that you perform a doLayout after you've toggled an element's visibility to make sure that everything gets placed properly.
Look at this jsfiddle: http://jsfiddle.net/LVKyM/
Ext.onReady(function(){
var pnl = new Ext.Panel({
renderTo: 'ctn-panel',
width: 300,
cls: 'my-pnl',
bodyBorder: false,
border: false,
layout: 'hbox',
layoutConfig: {
padding: 5
},
items: [
startBtn = new Ext.Button({
text: 'start',
width: 100,
hidden: true
}), {
xtype: 'spacer',
flex: 1,
}, {
xtype: 'button',
text: 'save',
width: 100
}
]
});
new Ext.Button({
renderTo: 'button-container',
text: 'Show/hide',
handler: function(){
startBtn.show();
pnl.doLayout();
}
});
});
I need to show a refresh button on a specific card only, the title bar to which is defined in some parent Panel. I have tried in the following way:
Parent Panel:
config:
{
layout : 'fit',
items:[
{
xtype:'titlebar',
docked:'top',
title:'Directory',
items:[
{
xtype: 'button', //First Button-visible in all cards
docked: 'left',
iconCls: 'arrow_left',
action: 'back'
},
{
xtype: 'button', //Target button-to be visible in one card only
docked: 'right',
iconCls: 'refresh',
action: 'reset',
hidden: true //hiding this button
}
]
},
{
xtype:'tabpanel',
tabBarPosition:'top',
items:[
{
title: 'Tab1',
xtype: 'Card1'
},
{
title: 'Tab2',
xtype: 'Card2'
}
]
}
]
}
I have a hidden property set to true for refresh button in above panel, which i want to set false for a card.
The target card is set active on a button click. I am changing hidden property to false in the buttonTapListener, and then setting the target card as active. But the refresh button do not get visible. Here is the controller code:
onButtonTap: function()
{
...
var getParentPanelRef = this.getParentPanel();
var parentPanelItems = getParentPanelRef.getItems();
console.log(parentPanelItems.items[0].config.items[1].hidden); //Prints true
directoryMainContainerItems.items[0].config.items[1].hidden=false;
console.log(parentPanelItems.items[0].config.items[1].hidden); //Prints false
var directorySearchMainUIRef = this.getSomeOtherParentPanel();
directorySearchMainUIRef.setActiveItem(1); //Switches to target card
}
The value of hidden gets changed, but button doesn't come up. Please suggest an alternative if so. Thanks in advance.
Instead of hiding/showing the button you could add/destroy the button.
I had a similar problem a while a ago and it seems that sencha not always detects when it should redraw components.
Maybe your parent component'width is out of you browser and your button is docked right so that you can's see it.
I have a simple button with menu. There is a treepanel inside the menu.
Whenever user selects some node in tree, i update the container buttons text.
In treepanel's afterrender event i make a default node selection in the tree and this fire selection event and the button's text is updated.
However, when the button is rendered for the very first time, the treepanel inside the menu is not yet rendered.
How can i make menu & treepanel render silently (adding to dom but not shown to user until button is clicked) after button is rendered?
Actually there is a workaround which i hesitate to use:
btn.showMenu();
btn.hideMenu();
Any better ideas?
JsFiddle: http://jsfiddle.net/exGk3/
Code:
var selectedNodeIndex = 1;
var onItemSelect = function (selModel, node, index) {
var treePanel = selModel.view.up();
var btn = treePanel.up("button");
btn.setText(node.data.text);
};
var afterTreeRender = function (t) {
t.selModel.select(selectedNodeIndex);
}
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
menu: {
items: {
xtype: "treepanel",
id: "tree",
indent: false,
width: 150,
height: 200,
rootVisible: false,
root: {
children: [{
text: "item 1",
leaf: true
}, {
text: "item 2",
leaf: true
}, {
text: "item 3",
leaf: true
}]
},
listeners: {
select: {
fn: onItemSelect
},
afterrender: {
fn: afterTreeRender
}
}
},
showSeparator: false
}
});
I think the easiest thing to do here is to pass along the text needed for the button. It seems that you already know which node to select in the tree, then you probably know which text corresponds to the selected index.
If that's somehow not possible or API is not changeable here is a way for you to set button text programmatically:
http://jsfiddle.net/dbrin/XSn7X/3/
The changes from what you have done are 2 fold:
Use Ext.define method to define your class with initComponent method.
The initComponet method is a hook after the constructor to setup aditional properties. The key here is that the instance of the class exists at this point and *this* context references the class instance.
Use Ext.create to create an instance of your customized button component.
In the initComponment method you just traverse the tree looking for the data you need and set the button text.
I have a formpanel
var form = new Ext.form.FormPanel({
title: 'Form Layout',
buttons: [
{text: 'Save'},
{text: 'Cancel'}
]
});
I want to change the layout of the buttons below, so that they appear one below the other.
Can I assign a layout to these buttons or is there another way?
Instead of adding as buttons you can go for items into fbar of this form panel , and add each button component here
var form = new Ext.form.FormPanel({
title: 'Form Layout',
buttons: [{
xtype: 'panel',
items: [
{text: 'Save'},
{text: 'Cancel'}
]
}]
});
this helps, but maybe its not a proper solution till i find a real one. marking for now, will change later when a better one arrives
I've been trying to learn Sencha Touch and I'm stuck on something that is probably pretty obvious. I'm trying to update a tabPanel with a button event. I'd like for a tap on the first button to load 'maptestPanel' in the same panel. This is a map loaded from its own js file.
The map panel looks ok by itself:
maptestPanel = new Ext.Panel({
layout: 'fit',
fullscreen: true,
items: [map]
});
But I'm not seeing how to properly place it in the tabPanel
The code is:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var navBar = new Ext.Toolbar({
dock : 'top',
title: 'Some App Name',
});
var topPanel = new Ext.Panel({
dockedItems: [navBar],
fullscreen : true,
//html: 'Test Panel'
});
var tapHandler = function(button, event) {
btnPanel.update(maptestPanel); //I'm sure part of the problem is here
}
var SomeDate1 = new Ext.Button({
text:"Some date",
minWidth:200,
height: 45,
cls:"listButtonTop",
handler:tapHandler
});
var SomeDate2 = new Ext.Button({
text:"Another Date",
minWidth:200,
height: 45,
cls:"listButton"
});
var SomeDate3 = new Ext.Button({
text:"And Another Date",
minWidth:200,
height: 45,
cls:"listButtonBottom"
});
var btnPanel = new Ext.Panel ({
id: 'date',
items: [SomeDate1,SomeDate2,SomeDate3],
});
var tabpanel = new Ext.TabPanel({
layout: 'card',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Maps',
//html: '<h1>Place holder</h1>',
iconCls: 'maps',
cls: 'card1',
items: [btnPanel]
}, {
title: 'Favs',
html: '<h1>Place holder</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit'
//items: [SomeList, SomeOtherList, AnotherList]
}, {
title: 'Info',
html: '<h1>Place holder</h1>',
cls: 'card4',
iconCls: 'info'
}]
});
}
});
Thanks for any advice or a steer in the right direction.
There's several things you need to do to fix up that code:
1) 'Maps' has no layout. Since it has a single child item, layout: 'fit' would be appropriate here.
2) Only use fullscreen on the outermost item, you don't want the other items to be fullscreen since they are child items of other containers.
3) To dynamically add items to a container, use the add() method on container. You'll also need to call doLayout() to trigger a layout for the container.
btnPanel.add(maptestpanel);
btnPanel.doLayout();
However, in this case I don't see why you're adding the map to a panel, it doesn't give you any extra functionality. Instead, I would add the map directly to the btnPanel.
4) The btnPanel has no layout either, so you'll need to choose an appropriate layout there as well, possibly the vbox layout.
I only know "classic" sencha, but this should work the same way : So you could just add the mapPanel (but hidden) to your tabPanel, and in the button handler show it while hiding the button panel.
Besides, speaking of layouts, I don't think you need to precise layout:'card' in tabPanel since it uses a card layout by definition