TopBar are define as shown
I want to be able to decrease and spacing between multiple button, but their doesn't seem to be a way to achieve this
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
I've tried adding styling to each button definition but it doesn't seem to have that functionality
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
style: {
marginHorizantal: -10, <= ?
}
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
Related
Trying to figure this out and I think I'm just missing something simple. I've got a few screens configured and I want to switch between tabs pending on a user action on the second screen.
Nav:
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
id: 'rootStack',
children: [
{
component: {
name: 'dashboard',
id: 'cc.dashboard',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Home',
icon: images.bottomIconHome,
testID: 'FIRST_TAB_BAR',
text: 'Home',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
// fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
{
stack: {
id:'screen2stack',
children: [
{
component: {
name: 'program',
id: 'cc.program',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Program Tab',
icon: images.bottomIconProgram,
testID: 'SECOND_TAB_BAR_BUTTON',
text: 'Program',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
//fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
}
});
I've tried:
Navigation.popTo('cc.dashboard');
But that does nothing, so then I tried:
Navigation.push('cc.dashboard', {
component: {
id: 'cc.dashboard',
name: 'dashboard',
passProps: propsToPass ? propsToPass : {},
options: {
layout: {
backgroundColor: color.charcoalGreyThree,
componentBackgroundColor: color.charcoalGreyThree,
},
bottomTabs: {
visible: true,
backgroundColor: color.charcoalGreyThree,
},
},
},
});
That works, but it doesn't update the bottom tabs on the screen, still showing the second tab as highlighted. It also just puts the dashboard over it so you can still click on "Home" and go to the dashboard. When you go back to the second screen, it shows the dashboard still. Any thoughts would be appreciated.
Using "react-native-navigation": "^7.16.0", "react": "17.0.1", "react-native": "0.64.1", if that matters at all.
In order to change current tab index in React Native Navigation, you need to do merge options for bottomTabs option:
Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
currentTabIndex: 1
}
});
For more information, you'd recommend checking out this part in the docs - https://wix.github.io/react-native-navigation/docs/bottomTabs/#selecting-a-tab-by-index.
Please help, i will explain first by showing the code :
home.js
onHelpPagePress() {
Promise.all([
AntDesign.getImageSource('arrowleft', 25)
]).then((sources) => {
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'projectName.HelpPage',
options: {
topBar: {
title: {
text: 'Screen Name 1',
},
drawBehind: false,
leftButtons: [
{
id: 'backButton',
enabled: true,
showAsAction: 'ifRoom',
component: {
name: 'projectName.Home',
passProps: {
color: 'white',
// pass event here
}
},
icon: sources[0],
color: 'white',
},
],
}
}
},
}]
}
}
});
});
}
it will looks like this :
------------------------------------
<- Screen Name 1
------------------------------------
how can i access the back button in the new screen?
and could someone help me how can i go to the previous screen?
thanks
it fixed when using navigation.showmodal
I'm creating a sencha touch app and the design requires a segmented button in the tab bar.
Is there an easy way to do this with sencha built-in features or do I have to create that by myself (add a toolbar with the segmented button as an item and create all the controls to actually get the same thing)?
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
tabBar: {
layout: {
pack: 'center',
},
items: {
xtype: 'segmentedbutton',
allowDepress: false,
listeners: {
initialize: function() {
Ext.SegmentedButton.implement({
setActive: function(activeItem) {
this.setActiveItem(activeItem);
}
});
}
}
}
},
autoDestroy: true,
activeItem: 1,
items: [
{
title: 'HIGHLIGHTS',
xtype: 'highlightview',
id: 'highlightView'
},
{
title: 'KATEGORIEN',
xtype: 'categoryView',
id: 'categoryView',
},
{
title: 'SUCHE',
xtype: 'searchView',
id: 'searchView',
}
],
}
That's what I tried so far. the listener is there to get around the error of [Object] Object has no method 'setActive', but doesn't result in the behaviour I'd like it to have.
//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton'
],
xtype: 'album',
id: 'album',
enter code here`enter code here`
fullscreen: true,
config: {
cls:[
'styles'
],
scrollable: 'vertical',
items: [
{
xtype: 'panel',
title: 'Close Case',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
height: 50,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
alert("foo");
itemId: "newButton11"
}
},
{
text: 'Option 2',
handler: function() {
alert("foo");
}
},
{
text: 'Option 3',
handler: function() {
alert("foo");
}
}
]
}
]
}
],
listeners: [
{
delegate: "#newButton",
event: "tap",
fn: "onNewButtonTap"
}
]
},
onNewButtonTap: function () {
//write your function here and it will work
}
//This is working for me just let me know if it works for you.
I need the tab-panels to fit browser window size. I have used card layout, and it is not re-sizing to fit the browser window. I think i'm missing some properties in my viewPort.
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'tabP1' }
},
{
xtype: 'panel',
items: { xtype:'tabP2' }
}
,
{
xtype: 'panel',
items: { xtype:'tabP3' }
}
]
});
},
2.) One of my tabpanels; I am using absolute layout. I am using this layout because it's easy to set form components where i ever i desire it to be. Therefore, i would like a solution that works with the same layout.
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.tabP1',
// height: 250,
// width: 726,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
UPDATE 2
UPDATE 2
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'tabP1'
},
{
xtype:'tabP2'
}
,
{
xtype:'tabP3'
}
]
});
},
onSuccess: function() {
this.getViewport().getLayout().setActiveItem(1);
},
I get an error when i use your code, saying that this.getViewport().getLayout().setActiveItem(1) is not a function. I think this is because i used border layout. How can i resolve this ?
Your problem is "over-nesting" Why are you putting 'tabPFoo' inside a panel with no layout? They are at best, redundant, also causing the layout system to spend more cycles when it's not needed.
Ext.require('*');
Ext.onReady(function(){
var vp = new Ext.container.Viewport({
layout: 'card',
items: [{
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 1'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 2'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 3'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.previousSibling().previousSibling();
vp.getLayout().setActiveItem(next);
}
}
}]
});
});
Obviously that's not MVC style, but that's the structure the layout should take.
I'm a new sencha learner , what i want to do is adding an image to the nested list text.
I tried to modify kithcensink exapmle code,This is my nestedlist
Ext.require('Ext.data.TreeStore', function() {
Ext.define('Kitchensink.view.NestedList', {
requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Kategori'],
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'nestedlist',
store: {
type: 'tree',
id: 'NestedListStore',
model: 'Kitchensink.model.Kategori',
root: {},
proxy: {
type: 'ajax',
url: 'altkategoriler.json'
}
},
displayField: 'text',
listeners: {
leafitemtap: function(me, list, index, item) {
var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
editorPanel.setRecord(list.getStore().getAt(index));
if (!editorPanel.getParent()) {
Ext.Viewport.add(editorPanel);
}
editorPanel.show();
}
}
}]
}
});
});
I modified the store file
var root = {
id: 'root',
text: 'Lezzet Dünyası',
items: [
{
text: 'Ana Menü',
id: 'ui',
cls: 'launchscreen',
items: [
{
text: 'Et Yemekleri',
leaf: true,
view:'NestedList3',
id: 'nestedlist3'
},
{
text: 'Makarnalar',
leaf: true,
view: 'NestedList2',
id: 'nestedlist2'
},
{
text: 'Tatlılar',
leaf: true,
view: 'NestedList4',
id: 'nestedlist4'
},
{
text: 'Çorbalar',
view: 'NestedList',
leaf: true,
id: 'nestedlist'
}
]
}
]
};
How should I edit the code to add image near the nested list text ?
For example , in this site you can see a nested list example , I need an images near Blues,Jazz,Pop,Rock.
Generally, you can do more than what you need by customizing your getItemTextTpl (place it into your Ext.NestedList definition, for example:
getItemTextTpl: function(node) {
return '<span><img src="image_url" alt="alternative_text">{text}</span>';
}
Define whatever template you like through that returning string.