I cannot change the tabbar titles in a tab Panel.
Edit: I'm working on a test app witch consists in a main tab panel with other three views, similar to the "getting started video" of the sencha-touch documentation.
Now, for localization purposes, I need to change dinamically the labels under the icons of the tab bar, representing the three links to the panels.
In the code below there is my attempt to change the label of the first button by changing the title of the related view, as the label display "Home", that is the title of the view.
I want to do that on the "activate" event of the view.
The result of this code is that if I log the title of the home view, it is changed but the tab bar button label remains the same.
I think that I miss something like "refreshing" the button, but I cannot find anything on this subject on the documentation.
I hope this edit explains better my question.
Here is the code:
Ext.define('lvzMobile.view.Main', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
xtype: 'main',
config: {
tabBarPosition: "bottom",
items: [
{
xtype: 'homePanel',
id: 'home',
},
{
xtype: 'catalogue',
id: 'catalogue'
},
{
xtype: 'infoPanel',
id: 'info'
}
],
listeners: {
activate: function() {
console.log("activate");
this.getAt(0).setTitle("emoh");
//the title changes but nothing happens in the tabbar...
}
}
}
});
Please, can you help me? I can't understand what's wrong.
The line that says:
this.getAt(0).setTitle('emoh')
…will change the title of your panel, but not the button itself. To change the button text, use:
this.getTabBar().getAt(0).setTitle('emoh')
Here's a fiddle with your code to demonstrate.
While there, here's a tip: use alias: 'widget.main' instead of xtype: 'main'. xtype is for configs, alias is for defining the alias which in turn can be used later with xtype (use prefix widget. to be used as a widget, store. to be used as a store, etc.).
Related
When maximizing/restoring a dialog that contains some form fields with names, like:
Ext.create('Ext.Dialog', {
maximizable: true,
items: {
xtype: 'textfield',
name: 'id',
bind: '{record.id}'
},
buttons: [{
text: 'Save',
bind: {
disabled: '{!record.valid}'
}
}]
}).show();
we're getting an error:
Ext.mixin.Container.attachNameRef(): Duplicate name: "id" on ext-viewport between ext-textfield-1 and ext-textfield-5
Two found workarounds :
Disable animation
Ext.define('Override.Dialog', {
override: 'Ext.Dialog',
config: {
maximizeAnimation: false,
restoreAnimation: false
}
});
Make the proxy used for animation have no items (nor buttons since button disable state may not reflect the bounded value
Ext.define('Override.Dialog', {
override: 'Ext.Dialog',
config: {
maximizeProxy: {
items: null,
buttons: null
}
}
});
Background Information
During maximize and minimize ExtJS creates a shadow clone.
This will create a clone of the window, while you still have the original item.
Using an ID means, there can only be one identical one at any given time.
The clone tries to create the your textfield with the same ID, which does not work.
Typically you want to
for forms you usually do not need to grab each item as you can work with validator and getValues on the form
otherwise you might want to work with references in the view and lookupReference in the controller.
not use animation (because that does not create a clone)
write your own maximize animation and do the animation part yourself (write your own maximize function)
Here is a screenshot to visualize what I want to do.
There is an extra tab which is iconless (between exit and project).
The blue highlighted line is the element itself in the inspector.
My goal is to set the tab's width in the tabbar and not in the tabpanel to 5px.
So That it would act has a spacer between tabs' icons.
I tried to manually add a CSS class so that I could create a very specific rule pointing to that element and inside this rule set the width to 5px with an !important tag.
.x-tab .x-tab-normal .x-item-disabled .x-iconalign-center .x-tab-icon .x-layout-box-item .x-stretched
{
width:5px !important;
}
Sadly I never found a way to add a class at that particular level of the component hierarchy.
So I tried to replace an existing CSS class of that component (.x-item-disabled).
I changed .x-item-disabled to .fake and than created a CSS rule accordingly...
It did not work and has in the first case, the component's css classes in the inspector did not changed at all..
I'm pretty sure I need to do it that way since it's not something sencha allows us to do.
Can someone help me out plz?
Ext.tab.Bar and Ext.tab.Tab are private classes and Ext.tab.Panel does not seem to expose that feature, so I guess at the moment there is no simple way to do what you ask. Those tabs are built based on the Panel items configuration, but the data you pass in are not directly mapped to them. Indeed if you apply a cls or style property to an item configuration, that goes to the content of the panel, not to its associated tab. You can however modify the tab after your panel has been initialized:
Try this:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: '',
iconCls: 'dummy',
html: ''
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
],
initialize: function() {
// get spacer by position, it's ugly but it works
// without extending Sencha components
var spacer = this.getTabBar().getAt(1);
// of course here you could apply a CSS class
// if you prefer
spacer.setStyle('width:5px; min-width:5px;');
// let's also disable the button
spacer.setDisabled(true);
// and remove the icon since it is mandatory in Panel
// config but we don't really want it
spacer.setIcon(false);
}
});
See the fiddle.
Add
this.callParent(arguments);
code in your initialize function in answer 1
I'am trying to display Sencha Touch 2 selectfield with very long option text but text gets truncated with Ellipsis, like Very long option t....
How to display couple lines in one option?
Code:
{
xtype: 'selectfield',
options:[
{
text: 'Very long option I wish to splint into two separate lines',
value: 0
},
{
text: 'Another very long option I wish to splint into two separate lines',
value: 1
}
]
}
I've tried using \n and <br/> but is not working.
There are 3 two ways to do this.
use labelWrap config option set to true.
This will avoid truncating text that appears on selectfield initially. Later when you tap on selectfield; you've two choices. Using picker or list. picker will be used only if you set it to true in usePicker config. If you are on tablet, desktop or mobile default list will be shown containing options. Using labelWrap config will not be usefull if options are displayed in list after tap on selectfield.
Use following CSS override to avoid truncating.
.x-list-item-label{
height: 100% !important;
}
.x-list-label{
white-space: pre-wrap !important;
}
This override along with above mentioned labelWrap config set to true will make both list and selectfield display whole text neatly. But this will override styles that may affect appearance of other lists in your app.
Third approach that can be is to override Ext.field.Select and create custom select field. In this style, you need to just override following method - getTabletPicker that generated the list displayed on tap of selectfield. Code from ST source is as fallows -
getTabletPicker: function() {
var config = this.getDefaultTabletPickerConfig();
if (!this.listPanel) {
this.listPanel = Ext.create('Ext.Panel', Ext.apply({
centered: true,
modal: true,
cls: Ext.baseCSSPrefix + 'select-overlay',
layout: 'fit',
hideOnMaskTap: true,
items: {
xtype: 'list',
store: this.getStore(),
itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
listeners: {
select : this.onListSelect,
itemtap: this.onListTap,
scope : this
}
}
}, config));
}
return this.listPanel;
}
Check out the line itemTpl and cls config. Here both options set styles that are defined for list. These will decide the appearance of list displayed on tap of selectfield. This approach might sound dirty. But it's useful, if you want to make some drastic changes in appearance and behaviour.
I am using Sencha Touch 2,0,1.
I need to get an element from a View in a Controller.
At the moment I use this method, which get the View correctly, but I am not able to get the Item in the View. I do not get any error just test is undefined.
Any ideas?
In the Controller:
var test = this.getDetailView().items['editButton'];
Code in the View:
Ext.define('XXX.view.DetailView',{
...
items: [
{
xtype: 'button',
text: 'Edit XXX',
ui: 'custom-btn-dwn-timetable',
itemId: 'editButton'
}
],
...
}
There are a couple other ways to get the reference to the edit button. You can wire the edit button as a ref like this:
Ext.define('MyApp.Controller', {
extend: 'Ext.app.Controller',
config: {
refs: {
editButton: '#editButton'
}
},
Then in your controller you can call the automatically generated getterthis.getEditButton() to get the actual edit button component.
Another thing you can do is save the edit button as an instance variable on your view like this:
Ext.define('XXX.view.DetailView',{
...
items: [
this.editButton = Ext.widget{(
xtype: 'button',
text: 'Edit XXX',
ui: 'custom-btn-dwn-timetable',
itemId: 'editButton'
)}
],
...
}
So now to access your button in the controller you have to do: this.getDetailView().editButton
In general, if an element is something you access a lot you should have a saved reference to it, rather than querying the DOM (to avoid unnecessary performance hit). Using Ext.getCmp() is also slower due to execution stack (it has to go through the ComponentManager every single time just to get the reference).
You can use Ext.ComponentQuery in this case to get your button:
Ext.ComponentQuery.query('#editButton')[1];
You could try setting your button id to edit and then
Ext.getCmp('edit').hide();
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9