I am making a basic application in Sencha Architect 3, and trying to add a menu button in the style of touch-tomatoes http://docs.sencha.com/touch/2.3.0/touch-build/examples/touchtomatoes/index.html
The code for adding the menu in the Touch Tomatoes project is an addition in the app.js file of Sencha Touch project as below, but I am unable to figure out how to do this in Sencha Architect, as it says that the app.js file would be over-ridden each time the project is saved
Ext.application({
name: 'TouchTomatoes',
requires: ['Ext.device.Storage','Ext.Menu', 'TouchTomatoes.components.MenuButton'],
controllers: ['TouchTomatoes.controller.Main'],
views: ['TouchTomatoes.view.Main', 'TouchTomatoes.view.WelcomeOverlay'],
launch: function() {
Ext.getBody().removeCls('loading');
Ext.create('TouchTomatoes.view.Main');
if (Ext.device.Storage.getItem('isFirstTime') !== "false") {
Ext.device.Storage.setItem('isFirstTime', false);
var overlay = Ext.create('TouchTomatoes.view.WelcomeOverlay');
Ext.Viewport.add(overlay);
overlay.show();
}
var menu = Ext.create("Ext.Menu", {
defaults: {
xtype: "menubutton"
},
width: '80%',
scrollable: 'vertical',
items: [
{
text: 'Opening',
iconCls: 'time',
menu:"opening"
},
{
text: 'Theatres',
iconCls: 'locate',
menu: "theatres"
},
{
text: 'Upcoming',
iconCls: 'team',
menu:"upcoming"
},
{
text: 'Top',
iconCls: 'bank',
menu:'top'
},
{
text: 'Search',
iconCls: 'search',
menu:"search"
}
]
});
Ext.Viewport.setMenu(menu, {
side: 'left',
reveal: true
});
}
});
You already have launch defined, so simply paste your two statements within it within architect.
In architect,
click on Application in the inspector
click on the launch action in the config pane to bring it up in the editor (Or, if you don't have launch defined, click on the + icon next to launch in the Config pane to add it.)
paste your code into the editor beneath your overlay code:
var menu = Ext.create("Ext.Menu", {
defaults: {
xtype: "menubutton"
},
width: '80%',
scrollable: 'vertical',
items: [
{
text: 'Opening',
iconCls: 'time',
menu:"opening"
},
{
text: 'Theatres',
iconCls: 'locate',
menu: "theatres"
},
{
text: 'Upcoming',
iconCls: 'team',
menu:"upcoming"
},
{
text: 'Top',
iconCls: 'bank',
menu:'top'
},
{
text: 'Search',
iconCls: 'search',
menu:"search"
}
]
});
Ext.Viewport.setMenu(menu, {
side: 'left',
reveal: true
});
You'll end up with exactly the code you listed above, and it wont be overwritten since it's part of the app's config.
Be aware that, since you include an xtype of 'menubutton,' that you'll have to create a button at the class level and give it a userAlias of 'menubutton,' or the app will throw an error stating, roughly, "I can't create widget with xtype.menubutton."
Related
I have a directory (folder) structure, which I show with the xtype 'breadcrumb' (ExtJS Version 6.6).
Now I will add a additional toggle in my app. When I active the toggle, all folders should be shown in the breadcrump text list and in the selectboxes. This is my actual developing status and works fine.
When I deactive the toggle, all folders with a leading "A" in the folder name should be hide in the selectboxes (or should be disable and shown grayed out). In the breadcrump text list this ("A"-)folders should be shown grayed out.
For example I have the breadcrump text list "root > folder_0_0 > folder_1_0" in my app and then I change the toggle value: Then I do not want to reload the complete breadcrump.
How can I resolve this problem? Thank you for your hints Thomas
here is my code. You can find this: https://fiddle.sencha.com/#view/editor&fiddle/2mqb
Ext.application({
name: 'BeadcrumbTest',
launch: function() {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: 'Root_folder',
children: [{
text: 'A_folder',
leaf: true
}, {
text: 'B_folder',
expanded: true,
children: [{
text: 'A_folder',
leaf: true
}, {
text: 'B_folder',
leaf: true
}]
}, {
text: 'C_folder',
leaf: true
}]
}
}),
panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 100,
bodyPadding: 10,
tbar: {
xtype: 'breadcrumb',
store: store
},
buttons: ['->', {
xtype: 'button',
text: 'Handle "A" folder',
handler: function() {
// todo
}
}]
});
}
});
I found a solution: I overwrite the methods updateSelection(), _onMenuClick() and _onMenuBeforeShow() from classic/src/Breadcrumb.js.
I am trying to create a simple example of admin dasboard with Triton theme. But can't manage how to make it right. So I need a simple example of slide menu for desktop and to change content in a content area. Now my hamburger button is streched and left menu itself is not like that one in triton theme.
Ext.define('KitchenSink.view.Menus',
{
extend: 'Ext.Container',
xtype: 'app-main',
//controller: 'main',
requires: [
'Ext.Menu'
],
layout: {
type: 'card'
},
items: [
{
/*xtype: 'toolbar',
docked: 'top',
title: 'Slider Menu',*/
//docked: 'top',
xtype: 'panel',
styleHtmlContent: true,
html: ['<b>Plan'].join(''),
items: [
{
xtype: 'button',
handler: function() {
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
} else {
Ext.Viewport.hideMenu('left');
}
}
}
]
}],
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
width: 250,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'Option 1',
},{
xtype: 'button',
text: 'Option 2',
}
]
});
return menu;
}
});
Ext.application({
name: 'Foo',
mainView: 'KitchenSink.view.Menus'
});
it's the treelist component, which is used in the admin dashboard.
Take a look at the example :
http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#tree-list.
You don't have to download it. It is already in your kitchensink-example of your ext-6.x.x folder.
I am learning sencha touch and extjs using citybars sample app provided by sencha itself.
Here is the link
http://docs.sencha.com/architect/3/tutorials/first_mobile_application.html
This app is very good for learning purpose and now i want to create an demo app in which i have following things:
There is a mainview which contains, static/fixed header (name view1).
Main view contains another view, let say view2 which is variable or can be changed.
Question
How can i achieve this functionality in which view2 change dynamically?
I can guide you with what you want to achieve.
If you need a slide navigation then first try this.
I am providing you with an sample code which will give you some idea on your desired layout. Try this view:
Ext.define('Sample.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.dataview.List'
],
config: {
layout: 'hbox',
cls: 'main',
items: [{
xtype: 'list',
itemTpl: '{title}',
data: [{ title: 'Red', val: 'red' },
{ title: 'Blue', val: 'blue' },
{ title: 'Orange', val: 'orange' },
{ title: 'Purple', val: 'purple' }],
flex: 1,
listeners: {
itemtap: function(el, index, target, record, e) {
var me = this,
element = Ext.get(e.target),
main = element.parent('.main'), //assign the dom of 'Main' view to 'main'
newCls = record.get('val');
if(me.lastAddedCls) {
main.removeCls(me.lastAddedCls).addCls(newCls);
} else {
main.addCls(newCls);
}
me.lastAddedCls = newCls; // Keeps track of last added view so that it can be further removed
}
}
}, {
cls: 'viewTwo',
flex: 2
}]
}
});
Here suppose the first section is navigation panel and second section is you desired variable view 2.
You can now add some styling in a css file(say style.css)
.main.red {
background-color: red;
}
.main.blue {
background-color: blue;
}
.main.purple {
background-color: purple;
}
.main.orange {
background-color: orange;
}
NB: Don't forget to add this css file in bootstrap.json and app.json files.
I showed this example by changing the background color. You can try adding and removing views here.
Feel free to ask any query.
You could use a TabPanel with a docked top toolbar. The TabPanel bottom bar would then allow your users to navigate between the views in your app.
A very simple example which you could build on for your own use:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My title'
},
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
The items would just be your own views created in Architect:
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My title'
},
{
xtype: 'mylistview',
iconCls: 'home'
},
{
xtype: 'mymapview',
iconCls: 'map'
}
]
Read more here => http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.tab.Panel
I am creating an app in which I have to create the popup like sencha touch theming expample to select the navigation items.
I tried to see its code on github for a hint but don't know what I am missing hare is my code for header bar and the list button.
Ext.define('ov_app.view.HeaderBar', {
xtype : 'HeaderBar',
extend:'Ext.Toolbar',
config: {
// xtype : 'toolbar',
ui: 'plain',
docked: 'top',
cls: 'menuBar',
border:0,
defaults:{
border: 0,
},
items: [
{
iconCls: 'list',
iconMask: true,
ui: 'plain',
action: 'ShowMoreOption',
},{
xtype: 'spacer'
},{
xtype: 'container',
html: '<img src="resources/images/logo.png">'
},{
xtype: 'spacer'
},{
iconCls: 'home',
iconMask: true,
id: 'homeBtn',
ui: 'plain',
action: 'push-view'
}
]
}
});
`
and code for my controller main.js to Handel the tab action on list button.
Ext.define('ov_app.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
},
'button[action=ShowMoreOption]':{
tap: 'togglMenu'
},
},
},
pushViewFunction: function() {
ov_app.container.setActiveItem(0);
},
togglMenu: function(){
console.log("hello");
}
togglMenu: function(button) {
this.getStyleBubble().showBy(button)
},
});
`
when I try to click on the list button on the top the error i see in my console is this
Uncaught TypeError: Object [object Object] has no method 'getStyleBubble'
and also I didn't see any definition for this 'getStyleBubble' function in any of the file in model, views, controller, store directories. So is it defined in any touch directories files or I am missing something.
There is no getStyleBubble() function deceleration in the controllers file also not in any file if you download the whole source code zip folder I think they have not uploaded complete source code. But i found solution to my answer. I have to create a new panel and make it toggle with the click of the list button like this.
togglMenu: function(button){
if(!this.overlay) {
this.overlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
height: 200,
width: 200,
//centered: true,
styleHtmlContent: true,
html: '<p>hello dummy content in the pop up box </p>',
scrollable: true
});
}
this.overlay.showBy(button);
`
I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller.
Below is my view and controller code.
Ext.define('MyApp.view.SignIn', {
extend: 'Ext.Container',
requires: ['Ext.Button','Ext.form.Panel'],
xtype: 'loginPage',
config : {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
html:'<img src="resources/icons/logo.png" />',
items: {
iconMask: true,
align: 'left',
text: 'Sign In',
handler: function(){
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
xtype: 'loginPage',
url: 'contact.php',
layout: 'vbox',
id: 'signinform',
items: [
{
xtype: 'fieldset',
title : 'Enter Login Information:',
instructions: 'All fields are required',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'Valid email'
},
{
xtype: 'passwordfield',
name: 'Password',
label: 'Password',
placeHolder: '6 characters'
}]
},
{
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Login',
ui:'confirm',
id:'Login-btn',
width: '100px',
flex: 1
}, {
width: '100px'
}, {
xtype: 'button',
text: 'Register',
ui: 'decline',
width: '100px',
flex: 1,
handler: function(){
this.getParent().getParent().destroy();
}
}]//Buttons array
}//Form completion
]
}).showBy(this); //Panel created
}//Function complete
}
},
{
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items:[{
html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
styleHtmlContent: true,
}
]
},
]
},
initialize: function() {
this.callParent(arguments);
},
});
And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.
Ext.define("MyApp.controller.SignIn", {
extend : 'Ext.app.Controller',
config : {
refs : {
home : '#homePage',
login : '#loginPage',
SignIn : '#signinform'
},
control : {
'#Login-btn': {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function() {
var formValues = this.getSignIn().getValues();
console.log(formValues.username);
console.log(formValues.password);
}
});
]
},
initialize: function() {
this.callParent(arguments);
},
});
What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
Here:
var panel = Ext.create('Ext.Panel', {
...
You are instantiating a simple panel not a form panel. May be you want to say:
var panel = Ext.create('Ext.form.Panel', {
...
I believe the reason you are getting undefined is because those components don't exist when the view is created.
Instead of creating the panel in your view (Ext.create('Ext.Panel'...) with a handler function you should consider defining it as an item in your xtype:loginpage container with hidden : true. Then via a listener from the controller call show() on the hidden component.
I find that if I keep event listeners/handlers in my controllers, and layout/display logic in my views my application becomes much more managable.
I also try to avoid calling Ext.create(Ext.SomeCmpt) and instead use the hidden attribute.
Hope this helps.