One example, I have a refresh buttons I created that is displayed on top, could I have code to later on remove this control?????
code with refresh button in it I would like to remove later on as the program is running
enyo.kind({
name: "MyApps.MainApp",
kind: enyo.VFlexBox,
components: [
{name: "gotCommentsSer", kind: "WebService",
onSuccess: "gotComments", url: "testservice.json",
onFailure: "gotCommentsFailure"},
{name: "getPendingSer", kind: "WebService",
onSuccess: "gotPending", url: "testservice.json",
onFailure: "gotPendingFailure"},
{kind: "PageHeader", content: "Template"},
{kind: "Button", caption: "Refresh", onclick: "btnRefresh"},
{name:"curValue", content:("Sample Text")},
// {name: "feedUrl", kind: "Input", flex: 1},
{kind: "RichText", name: "PendingMsg", value: "To <b>boldly</b> go..", onchange: "richTextChange"},
{kind: "Scroller", flex: 1, components: [
{kind: "VirtualRepeater", name: "list", onSetupRow: "setupRow", components: [
{kind: "Item", layoutKind: "HFlexLayout", components: [
{kind: "HtmlContent", name: "caption2" , onLinkClick: "btnClick"}
]}
]}
]},
{kind: "Toolbar", name: "tabs"}
],
It might be easier for you just to .hide() your control rather than destroy it completely. If you really want to get rid of it, you should refer back to the section on dynamically creating components. To remove the component try:
this.$.Button.destroy();
Related
i created a basic sencha project via cmd:
sencha -sdk path/to/SDK generate app classic SandBox path/to/TARGET
in addition i changed the the data to a Personel.json
{ "items": [
{ "name": "Jean Luc", "email": "jeanluc.picard#enterprise.com", "phone": "555-111-1111" },
{ "name": "Worf", "email": "worf.moghsson#enterprise.com", "phone": "555-222-2222" },
{ "name": "Deanna", "email": "deanna.troi#enterprise.com", "phone": "555-333-3333" },
{ "name": "Data", "email": "mr.data#enterprise.com", "phone": "555-444-4444" }]}
store.Personnel.js
Ext.define('SandBox.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
autoLoad: true,
autoSync: true,
loading: true,
model: 'SandBox.model.Personnel',
proxy: {
type: 'ajax',
url: 'resources/json/Personnel.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
now i want to edit the values inside the table with the rowediting plugin.
view.main.List.js
Ext.define('SandBox.view.main.List',{
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
requires: [
'SandBox.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
plugins: {
ptype: 'rowediting'
},
columns: [{
text: 'Name', dataIndex: 'name',
editor:{
xtype: 'textfield',
emptyText: 'Name'
}},{
text: 'Email',
dataIndex: 'email',
flex: 1,
editor:{
xtype: 'textfield',
emptyText: 'Email'
}},{
text: 'Phone',
dataIndex: 'phone',
flex: 1 ,
editor:{
xtype: 'textfield',
emptyText: 'Phone'
}}
]});
if i try to change any value of the table always the first entry of the Personnel.json will insert in the whole row. so i try to disable the POST function from the update button and keep the changed data localy in cause i haven't actualy any backend. later i want to send explicit the POST request by a seperate "Send" button. i tried to customize the rowediting plugin like this in addition i changed the autoCancel in autoUpdate.
rowediting: {
clicksToMoveEditor: 1,
autoUpdate: false,
useButtonText: false,
saveBtnIconCls: 'fa fa-check green-color',
cancelBtnIconCls: 'fa fa-times red-color'
}
this way i get the following error:
Error: [Ext.createByAlias] Unrecognized alias: plugin.null ext-all-rtl-debug.js:15041:27
instantiateByAlias
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15041:27
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:241654:26
constructPlugin
http://localhost:1841/ext/build/ext-all-rtl-debug.js:70680:26
constructPlugins
http://localhost:1841/ext/build/ext-all-rtl-debug.js:70708:33
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:200605:26
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/classic/theme-neptune/overrides/panel/Table.js:9:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:67285:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:200554:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
widget
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15582:20
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:27456:16
lookupComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140073:20
prepareItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140658:32
add
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139552:23
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139975:17
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161148:9
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139936:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161137:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:67285:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
widget
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15582:20
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:27456:16
lookupComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140073:20
prepareItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140658:32
add
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139552:23
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139975:17
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161148:9
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139936:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161137:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:247719:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:67285:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
anonymous
http://localhost:1841/ext/build/ext-all-rtl-debug.js:3:8
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15525:20
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:11458:20
applyMainView
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96557:16
setter
http://localhost:1841/ext/build/ext-all-rtl-debug.js:10577:57
makeInitGetter/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:10556:24
initMainView
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96329:13
onBeforeLaunch
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96283:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
onBeforeLaunch
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96585:9
onProfilesReady
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96217:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96186:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
createApp/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96483:48
invoke
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18581:17
doInvokeAll
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18625:13
invokeAll
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18594:13
handleReady
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18550:13
handleReadySoon/me.timer<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18565:17
bind/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:6891:28
defer/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:7088:29
so i tried to override the plugin like this an add a new RoweditPlugin.js
Ext.grid.plugin.RowEditorButtons.override({
constructor: function(config)
{
var me = this,
rowEditor = config.rowEditor,
editPlugin = rowEditor.editingPlugin;
me.callParent(arguments);
me.insert(0,
{
cls: Ext.baseCSSPrefis + 'row-editor-update-button',
itemId: 'nbtn',
handler: editPlugin.newSave,
text: 'Update Local',
disabled: rowEditor.updateButtonDisabled
});
},
newSave: function(button)
{
this.completeEdit();
}
});
and changed the call from the plugin in List.js
plugins: {
ptype: 'rowediting',
autoUpdate: false
},
but now the rowEditPlugin is uneffected by my override. what can i do to change the default functionallity from the update button?
I create a website template with mock data by using vue & vuetify.
I have different pages like:
localhost:8080/home
localhost:8080/exp
localhost:8080/skills
localhost:8080/about
I would like to use this template for each user and change the structure to this:
localhost:8080/username/home
localhost:8080/username/exp
localhost:8080/username/skills
localhost:8080/username/home
I don't know whether this is the best practice and also I don't know how to do it.
I think that I will use firebase to store and get user related data. Also I am open for any suggestions.
When I go localhost:8080/user/1 I can see everything in User.vue however when I go localhost:8080/user/1/home nothing is rendered. (localhost:8080/home works. I can see everything inside User.vue & Home.vue as well.
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/exp',
name: 'exp',
component: Exp
},
{
path: '/skills',
name: 'skills',
component: Skills
},
{
path: '/about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>
You need to do this in the router. like this:
{
path: 'username',
meta: { label: 'Username'},
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'home',
name: 'Home',
component: Home
},
{
path: 'exp',
name: 'Exp',
component: Cards
},
{
path: 'about',
name: 'About',
component: About
},
{
path: 'other',
name: 'Other',
component: Other
}
]
}
So u add childs to your path.. this makes the url look like /username/exp
The main problem was using ' / home' in the path. This is why it goes localhost:8080/home instead of localhost:8080/user/1/home
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'home',
name: 'home',
component: Home
},
{
path: 'exp',
name: 'exp',
component: Exp
},
{
path: 'skills',
name: 'skills',
component: Skills
},
{
path: 'about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>
I have a very standard nested JSON response. Projects have many dashboards. Dashboards have many charts.
What is the right way to define and use my schemas?
Below is the code for my Schemas.js, my API response, and what Normalizr converts my API response into.
Schemas.js:
import { Schema, arrayOf, normalize } from 'normalizr';
// Create a schema for each model.
const project = new Schema('projects');
const dashboard = new Schema('dashboard');
const chart = new Schema('chart');
// Projects have many dashboards.
project.define({
dashboards: arrayOf(dashboard)
});
// Dashboards have many charts.
dashboard.define({
charts: arrayOf(chart)
});
export const Schemas = { project, dashboard, chart };
My API response:
{
projects: [{
id: 1,
name: "Project 1",
dashboards: [{
id: 1,
name: "Dashboard 1",
charts: [{
id: 1,
name: "Chart 1"
},
{
id: 2,
name: "Chart 2"
}]
},
{
id: 2,
name: "Dashboard 2",
charts: [{
id: 3,
name: "Chart 3"
},
{
id: 4,
name: "Chart 4"
}]
}]
},
{
id: 2,
name: "Project 2",
dashboards: [{
id: 3,
name: "Dashboard",
charts: []
}]
}]
}
When I receive this JSON in an action I do normalize(response, Schemas.project);. This seems to move the entire response into entities.projects.undefined.
{
entities: {
projects: {
undefined: {
projects: [{
id: 1,
name: "Project 1",
...
}, ...]
}
}
},
result: undefined
}
How should I correctly define and use my schemas for this?
References:
https://github.com/gaearon/normalizr
https://github.com/reactjs/redux/blob/master/examples/real-world/actions/index.js
This should give you the desired result:
normalize(response, {
projects: arrayOf(Schemas.project)
});
The projects key is nescessary because you have an extra key in your response, and the arrayOf() indicates that the API returns an array of results.
I have a meteor app using livestamp. However, I wish to represent a collection within a reactive-table. However, when I try the code below, it doesn't work (I see nothing in the updated column):
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (degC)' },
{ key: 'ts', label: 'updated', fn: (v,o) -> livestamp v }
]
}
but when I use it within a template, it works fine. How can I get the functionality of livestamp within my reactive table?
You can do that with https://atmospherejs.com/aldeed/tabular it's also datatables but it's different package (in my opinion better)
if you choose to use it here is an example, tabular has the option to render fields as a template and livestamp should work just as on the template itself.
TabularTables.Books = new Tabular.Table({
name: "Books",
collection: Books,
columns: [
{data: "_id", title: "id"},
{data: "_id", title: "Rack"},
{ data: 'ts', title: 'updated',
tmpl: Meteor.isClient && Template.liveStamp
}
]
});
// template
<template name="liveStamp">
<p>{{livestamp this.ts}}</p>
</template>
so i guess it helps to actually read the manual....
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (°C)' },
{ key: 'ts', label: 'updated', tmpl: Template.sensor_updated }
]
}
and then a template somewhere...
<template name="sensor_updated">
{{ livestamp ts }}
</template>
I have successfully implemented this slide navigation library. I can slide the main viewport in and out to reveal and hide the navigation on the left of the viewport.
However, I'm unable to find a way of hiding and showing the navigation via button click. How can I tie in my existing slide navigation into a button click action?
UPDATE:
My attempt to add a customized bar to Main.js was a matter of extending TitleBar in a class called CustomBar. I then used it via xtype in Main.js. The code below shows my Main.js code with configuration for the Slide Navigation library:
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar',
// 'Ext.Video'
],
config: {
fullscreen: true,
// slideSelector: 'x-toolbar',
slideSelector: '',
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
/*slideButtonDefaults: {
selector: 'toolbar'
},*/
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
slideButton: {
selector: 'toolbar'
},
defaults: {
style: 'background: red',
xtype: 'container',
},
/****************************************************/
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'custombar',
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Messages',
xtype: 'messages',
iconCls: 'user',
},
{
title: 'Sections',
xtype: 'sections'
},
{
title: 'submenu#1',
html: 'submenu#1',
group: 'Group 2',
},
{
title: 'submenu#2',
html: 'submenu#2'
},
{
title: 'submenu#3',
html: 'submenu#3'
},
]
}
});
My customBar.js code is as follows:
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
// name: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
This customBar code is used by Views statically. My LIST components use a different solution for getting the NavigationBar and adding components to it to generate a similar looking bar as CustomBar.
I need to make a connection between my pre-existing LIST icon button from CustomBar.js with the Slide Navigation functionality - so I can drag or click the icon to show/hide the navigation menu.
UPDATE#2
Having followed your direction in your update below and in my previous question, the solution I implemented for placing my LIST back buttons into the same toolbar as my custom navigation no longer worked. The image below shows my results:
I had been successfully using the following code to detect the messages and sections list views, get the navigation bar and place my icons into the bar. My thinking was to then use a listener on the list icon to show/hide the menu. However, as there is no listener and just the slideButton configuration, my code is redundant:
Ext.define('RT.controller.BarGenerator', {
extend: 'Ext.app.Controller',
config: {
refs: {
messagesView: 'messages',
sectionsView: 'sections'
},
control: {
'sections': {
initialize: 'generateBarSections'
},
'messages': {
initialize: 'generateBarMessages'
},
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
generateBarSections: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getSectionsView().getNavigationBar();
navigationview.add(
{
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
},
generateBarMessages: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getMessagesView().getNavigationBar();
navigationview.add(
{
slideButton: {
selector: "custombar"
},
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
}
});
The Ext.ux.slidenavigation.View comes with a slide button functionality.
You only need to specify where the button should be.
You can populate the items array of the Ext.ux.slidenaviagtion.View with containers. These containers have a property slideButton where you can define a selector which is used to find the component into which the button should be inserted.
items : [
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
itemId : 'start_toolbar',
title : 'first view',
docked : 'top'
},
{
xtype : 'start'
}
]
},
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
title : 'second view',
docked : 'top'
},
{
xtype : 'anotherview'
}
]
}
]
In the example the items array of the Ext.ux.slidenavigation.View holds 2 containers. A container always holds two components. A toolbar and the actual view I want to show. The slideButton config property defines that the button is inserted into a component with the xtype toolbar.
Update:
Thank you for providing some code. I have rearranged your code, so it fits my example.
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
First, I have removed your button from your custombar. The slide navigation will create the button for you.
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
/****************************************************/
slideButtonDefaults: {
iconMask: true,
iconCls: 'list',
ui: 'plain'
},
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
styleHtmlContent: true,
scrollable: true,
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
xtype: 'messages'
}
]
}
]
}
});
Since the slide navigation will create the slide button for you, you can use slideButtonDefaults to customize it.
The items array of the slide navigation is the important part.
It contains now two containers. That means you get two entries in the side navigation. Each of these container contain your custombar and the view you actually want to show when one taps an entry in the side navigation.
Each of the wrapping container define where the slide button will be placed in its child views. It's done by
slideButton: {
selector: 'custombar'
}
And that's it.
Update#2
This happens because you have multiple toolbars now. The testing-toolbar is inserted into every container that will be displayed by the slide navigation. The other toolbar comes from the navigation view which is hosted inside the slide navigation container.
The are some ways to "fix" it.
First you could hide the navigation view toolbar when it comes active and your first view inside the navigation view is shown. It's important that this view is a view that will never have a logical predecessor. So there will never be any reason to have a back button at that level. When you start navigating in the navigation view and you push more and more views to it you can hide the 'testing'-toolbar. The question is: is it important that you have the slide button in every child view or is it good enough to have it on the top view only. Consider this: to many buttons in a toolbar is quite to much and might confuse the user. Opening the slide navigation is still possible by swiping.
Or you don't use your custombar at all but customize the titlebar of the navigation view. The items array of your slide navigation would look like this:
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"titlebar"
},
items: [
{
xtype: "navview"
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "tilebar"
},
items: [
{
xtype: 'navView2'
}
]
}
]
But be aware of having two buttons in the navigation titlebar (docked to the left) when you start pushing views.