Controller SlideMenu on Sencha - extjs

Help me :(
I've been researching on how to reference methods of a button using MVC on Sencha Touch, but none of the articles has worked fine for me since I declare all my controls on the constructor of my views.
View :
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.Menu',
'Ext.Img',
'Ext.Toolbar',
'Ext.Container'
],
config: {
scrollable: true,
type: 'card',
fullscreen : true,
html: [
'<img max width="100%" height="auto" src="resources/image/Head.png" />',
'<h1>STMIK Akakom Yogyakarta</h1>',
'<h1><img max width="40%" height="auto" src="resources/image/Logo.png"/> </h1>'
],
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Selamat Datang',
items: [
{
xtype: 'button',
iconCls: 'list',
ui: 'plain',
action : 'slideMenu'
}
]
},
{
xtype: 'toolbar',
docked:'bottom'
}
],
},
Controller :
config: {
views: [
'Main',
'MenuNav',
'HalamanUtama'
],
refs: {
main: {
selector:'main',
xtype:'main',
autoCreate: true
},
menunav:{
selector:'menunav',
xtype: 'menunav',
autoCreate: true
},
halamanutama: {
selector: 'halamanutama',
xtype: 'halamanutama',
autoCreate: true
}
},
controll: {
'button[ui=plain]':{
tap: 'slideMenu'
},
'button=action[MenuNavOption]': {
tap: 'handleNavigation'
}
}
},
initialize: function(){
var menuNav = this.getNav();
Ext.Viewport.setMenu(menuNav,{
side: 'left',
reveal: true
});
},
slideMenu: function(){
if(Ext.Viewport.getMenus().left.isHidden())
{
Ext.Viewport.showMenu('left');
}
else
{
Ext.Viewport.hideMenu('left');
}
},
handleNavigation: function(button){
switch(button.getText()){
case 'HalamanUtama' :
var halamanutamaView = Ext.Viewport.child('halamanutama');
if (!halamanutamaView) {
halamanutamaView = this.getHalamanutama();
Ext.Viewport.add(halamanutamaView);
}
Ext.Viewport.setActiveItem(halamanutamaView);
break;
default :
var mainView = Ext.Viewport.child('main');
if(!mainView){
mainView = this.getMain();
Ext.Viewport.add(mainView);
}
Ext.Viewport.setActiveItem(mainView);
}
this.hideNav();
}
}
but still my slide menu did not show up :( please can you show me the way. Any help would be appreciated. Thank you.

Related

Sencha Touch detailed page view into items with buttons

1.Could please anybody help me with this issue?
1.After clicking on data detail I need see something as bellow (NotesApp.view.NoteEditor):
1.button_1
1.html + {title} + html
1.button_2
1.html + {narrative} + html
app.js
Ext.application({
name: "NotesApp",
models: ["Note"],
stores: ["Notes"],
controllers: ["Notes"],
views: ["NotesList", "NoteEditor"],
launch: function () {
var notesListView = {
xtype: "noteslistview"
};
var noteEditorView = {
xtype: "noteeditorview"
};
Ext.Viewport.add([notesListView, noteEditorView]);
}
});
NotesApp.model.Note
Ext.define("NotesApp.model.Note", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
]
}
});
NotesApp.store.Notes
Ext.define("NotesApp.store.Notes", {
extend: "Ext.data.Store",
config: {
model: "NotesApp.model.Note",
data: [
{ title: "Ibuprofen STDATA 200", narrative: "LIEK"},
{ title: "Ibuprofen STDATA 450", narrative: "LIEK"},
{ title: "IbuprofANIN", narrative: "LATKA"}
]
}
});
NotesApp.controller.Notes
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
notesListView: "noteslistview",
noteEditorView: "noteeditorview",
notesList: "#notesList"
},
control: {
notesListView: {
editNoteCommand: "onEditNoteCommand"
},
noteEditorView: {
backToHomeCommand: "onBackToHomeCommand"
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
activateNoteEditor: function (record) {
var noteEditorView = this.getNoteEditorView();
noteEditorView.setRecord(record);
Ext.Viewport.animateActiveItem(noteEditorView, this.slideLeftTransition);
},
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
},
onEditNoteCommand: function (list, record) {
this.activateNoteEditor(record);
},
launch: function () {
this.callParent(arguments);
var notesStore = Ext.getStore("Notes");
notesStore.load();
},
init: function () {
this.callParent(arguments);
}
});
NotesApp.view.NotesList
Ext.define("NotesApp.view.NotesList", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.noteslistview",
config: {
layout: {
type: 'fit'
},
items: [{
xtype: "toolbar",
title: "Liek",
docked: "top",
}, {
xtype: "list",
store: "Notes",
itemId:"notesList",
onItemDisclosure: true,
itemTpl: "<div>{title}</div><div>{narrative}</div>"
}],
listeners: [ {
delegate: "#notesList",
event: "disclose",
fn: "onNotesListDisclose"
}]
},
onNotesListDisclose: function (list, record, target, index, evt, options) {
console.log("editNoteCommand");
this.fireEvent('editNoteCommand', this, record);
}
});
NotesApp.view.NoteEditor
Ext.define("NotesApp.view.NoteEditor", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.noteeditorview",
initialize: function () {
this.callParent(arguments);
},
config: {
// this is working !!!
// tpl: [
// '<div><p>Info about: {title} </p></div>'
// ],
items: [
{
xtype: "button",
text: '<div style="text-align:left;">button 1<div>',
ui: "action",
id:"button_1"
},
{
xtype: 'list',
itemTpl: [
'<div>title: {title} </div>' // working not !!!
]
},
{
xtype: "button",
text: '<div style="text-align:left;">button 2<div>',
ui: "action",
id:"button_2"
},
{
xtype: 'list',
itemTpl: [
'<div>title: {narrative} </div>' // working not !!!
]
}
]
},
});
in your controller, you attach the onEditNoteCommand handler to the editNoteCommand. This is not a valid event (and is never triggered) of the Ext.dataview.List object as you can see in the Sencha documentation.
You have to attach the handler to an existing event, in this case to the itemtap one:
control: {
notesListView: {
itemtap: "onEditNoteCommand"
},
...
Problem
You created NotesApp.view.NoteEditor as list, within that list you have two separate list for title and narrative and But in controller you setting data only for NoteEditor list, not for two list within NoteEditor, so that two list will not show any data because they didn't get data.
Can do like this
In view
Give itemId for that two list.
{
xtype: 'list',
itemId : 'title',
itemTpl: [
'<div>title: {title} </div>' // working not !!!
]
},
{
xtype: "button",
text: '<div style="text-align:left;">button 2<div>',
ui: "action",
id:"button_2"
},
{
xtype: 'list',
itemId : 'narrative',
itemTpl: [
'<div>title: {narrative} </div>' // working not !!!
]
}
In controller
activateNoteEditor: function (record) {
var noteEditorView = this.getNoteEditorView();
noteEditorView.getComponent('title').setData(record.getData().title);
noteEditorView.getComponent('narrative').setData(record.getData().narrative);
Ext.Viewport.animateActiveItem(noteEditorView, this.slideLeftTransition);
},
What you trying to do ?
First of all NotesApp.view.NoteEditor is to edit note with two fields for title and narrative.
Why you have two list for title and narrative ?
What is the purpose of that list in edit screen ?

How to change views when I click a button?

I'm using, or abusing, Sencha Touch for the first time and I just want to push a list view, when i click a button. Here is my view:
Ext.define('TouchNuts.view.Decision', {
extend: 'Ext.Panel',
xtype: 'decision',
config: {
title: 'Decision',
scrollable: true,
styleHtmlContent: true,
styleHtmlCls: 'Decision',
tpl: '<h2>{name}</h2>, <h3>{description}<h3>, <h4>{price:ellipsis(15)}</h4> <h1>you can do this </h1>',
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
action: 'doSomething'
}
]
}
});
Here is the view I'd like to push:
Ext.define('TouchNuts.view.File', {
extend: 'Ext.Panel',
xtype: 'file',
config: {
title: 'File',
iconCls: 'star',
layout: 'fit',
items: [
{
xtype: 'list',
id: 'file',
store: 'TransactionStore',
itemTpl: '<h2>{name:ellipsis(15)}</h2>, <h3>{description:ellipsis(8)}<h3>, <h4>{price:ellipsis(15)}</h4>',
itemCls: 'SummaryItems'
}
]
}
});
And here is my controller:
Ext.define('TouchNuts.controller.doSomething', {
extend: 'Ext.app.Controller',
config: {
refs: {
},
control: {
'button[action=doSomething]' : {
tap: function() {
getMainView('TouchNuts.view.Decision').push('TouchNuts.view.File');
}
}
}
}
});
I'm pretty good with HTML, CSS, and jQuery, but new to JS and totally clueless when it comes to Sencha so any advice is appreciated.
It is good to give your views an itemId inorder to reference them in your controller. So for instance:
TouchNuts.view.Decision can have an itemId:decisionPanel
and
TouchNuts.view.File can have an itemId:filePanel
Now in your Controller you would do this:
...
config: {
refs: {
decisionPanel: {
autocreate: true,
selector: '#decisionPanel',
xtype: 'decision'
},
filePanel: {
autocreate: true,
selector: '#filePanel',
xtype: 'file'
}
},
control: {
'button[action=doSomething]' : {
tap: 'onButtonTap'
}
}
onButtonTap : function(button, e, options) {
var me = this;
Ext.Viewport.setActiveItem(me.getDecisionPanel());
}
...
You will notice that I used getDecisionPanel() to get the decisionPanel view. This is because a getter function is automatically generated for each ref you specify and in order to access it, you new to use get+ the Capitalized ref name.
More info here: http://docs.sencha.com/touch/2-1/#!/api/Ext.app.Controller
Instead of
getMainView('TouchNuts.view.Decision').push('TouchNuts.view.File');
You have to create the view first and then push it to view
getMainView('TouchNuts.view.Decision').push(Ext.create('TouchNuts.view.File'));

Adding carousel to panel

First program logic:
I have a main panel and there is a list at the left side and another panel at the right side.
When user touches the list item some html appears in right panel. What i need to do is using carousel instead of right panel.
My view
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
pinHeaders: false,
grouped: true,
//disableSelection: true,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
},
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
As you can see there is a xtype:panel and i tried to modify that code and i did it like this
xtype: 'carousel',
defaults{
styleHtmlContent:true,
id:'mypanel'},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
Also i use a controller
Ext.define('MyApp.controller.MeniuController',{
extend:'Ext.app.Controller',
config:{
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel panel[id=mypanel]'
},
control:{
leftMeniu:{
itemtap:'onItemTap'
}
}
},
onItemTap:function(list, index, item, record, e , opts)
{
var content = '<h2>' + record.get('label') +'</h2>' + record.get('html');
this.getMyPanel().setHtml( content );
}
});
And i modified this part like this
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel carousel[id=mypanel]'
Although these modifications i can't run my code , what should i do ?
A couple of small issues that I see. You are missing a colon on defaults: And I think you want to move that id to one of your carousel elements, right? With your code, I'm only getting one page with the id defined at that level. If you move it down you will see three pages.
defaults: {
styleHtmlContent:true,
id:'mypanel' // IN WRONG PLACE?
},
[UPDATE]
I got it working so that you can write to any of your carousel panels. I just created a direct reference to each id in the refs:{} section. I'm drawing to the second page so drag it into view to see the updates.
Also, I'm adding the model, store, and app.js so that anyone reading this will have a complete working example.
Ext.define('MyApp.controller.MeniuController', {
extend:'Ext.app.Controller',
config:{
refs:{
leftMeniu:'mypanel list[id=mylist]',
// myPanel:'mypanel panel[id=mypanel]'
// myPanel:'mypanel carousel[id=mypanel]'
myFirstPanel:'#mypanel1',
mySecondPanel:'#mypanel2'
},
control:{
leftMeniu:{
itemtap:'onItemTap'
}
}
},
onItemTap:function(list, index, item, record, e, opts) {
var content = '<h2>' + record.get('label') + '</h2>' + record.get('html');
this.getMySecondPanel().setHtml(content);
this.getMyFirstPanel().setHtml(content);
}
});
Complete MyPanel View:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi'
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
pinHeaders: false,
// grouped: true,
//disableSelection: true,
width: 331,
itemTpl: [
'{label}'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...'
}
]
},
// {
// xtype: 'panel',
// styleHtmlContent:true,
// style: {
// backgroundImage: 'url(../images/risk2.png)',
// backgroundRepeat: 'no-repeat',
// backgroundPosition: 'center'
// },
// id:'mypanel'
// }
{
xtype: 'carousel',
defaults: {
styleHtmlContent:true
},
items: [
{
html: 'Item 1',
style: 'background-color: #5E99CC',
id:'mypanel1'
},
{
html: 'Item 2',
style: 'background-color: #759E60',
id:'mypanel2'
},
{
html: 'Item 3'
}
]
}
]
}
});
app.js
Ext.application({
name: "MyApp",
views: ['MyPanel'],
models: ['Meniu'],
stores: ['Menius'],
controllers: ['MeniuController'],
launch: function() {
Ext.Viewport.add(Ext.create('MyApp.view.MyPanel'));
}
});
Model:
Ext.define('MyApp.model.Meniu', {
extend: 'Ext.data.Model',
config: {
fields: ['img_url', 'label', 'html']
}
});
Store:
Ext.define('MyApp.store.Menius', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.Meniu',
defaultRootProperty: 'items',
grouper: function(record) {
return record.get('label')[0];
},
root: {
text: 'foo',
items: [
{img_url: 'foo.png', label: 'one', html:'nice', leaf: true},
{img_url: 'foo.png', label: 'two', html:'carousels', leaf: true}
]
}
}
});

Sencha Touch 2: Trying to add a list to a panel

I have a panel which consists of a toolbar and tabs. On each tab there should be a list and a button. I believe I have this set up correctly except for the list, which I am trying to add as follows:
Ext.define('Myapp.view.Search', {
xtype: 'search',
extend: 'Ext.tab.Panel',
config: {
activeItem: 0,
tabBar: {
docked: 'top',
autoScroll: 'auto',
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{
xtype:'toolbar',
docked:'top',
ui: 'light',
title: 'Search'
},
{
title: 'Tab 1',
xtype: 'formpanel',
items: [
{
xtype: 'Mylist' //DOES NOT WORK
},
{
xtype: 'panel',
defaults: {
xtype: 'button',
style: 'margin: 0.1em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Button 1',
}
]
}
]
},
{
title: 'Tab 2',
xtype: 'formpanel',
items: [
{
xtype: 'panel',
defaults: {
xtype: 'button',
style: 'margin: 0.1em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Button 1',
}
]
}
]
}
]
}
});
Please let me know what I am doing wrong and thanks for you help!
EDIT: added Mylist below:
Ext.define('Myapp.view.Mylist', {
extend: 'Ext.dataview.NestedList',
xtype: 'Mylist',
config: {
store: 'Sections'
},
getTitleTextTpl: function() {
return '{name}';
},
getItemTextTpl: function(node) {
return '<strong>{name}</strong>';
},
});
Try these
in View:
{
xtype: 'panel',
flex: 4,
width: '400px',
height:"700px",
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
// loadingText:"Loading Category",
styleHtmlContent: true,
// id:"mylist2",
width:"300px",
itemTpl:
'<div class="mycon">'+
'<input type="image" id="click" img src="{coupon_image}" style="max-width:130%;border:6px double #000000;" width="200" height="200"' +'style="padding:3px;">' +
'</div>'+
'<div><font size="2" color="red"><b>Coupon Name:</b></font></div>'+
'<div><font size="2" color="green"><b>{coupon_name}</b></font></div>'+
'</div>',
store : 'ViewCategoryStore',
},
]
}
in controller:
Ext.define('Expressdeal.controller.ViewCategoryController', {
extend: 'Ext.app.Controller',
config: {
refs: {
viewcat : 'viewcategory' // xtype of the view
},
control: {
'viewcategory list: {
activate: 'onActivate',
itemtap: 'onItemTap',
},
Where you define your list in your List view you should say
alias:'widget.Mylist'
instead of
xtype:'Mylist'
also your list needs an itemTpl config im pretty sure.
config: {
store: 'Sections',
itemTpl:'{example}'
}
And as long as the store that drives your list is in working shape the list should appear correctly

show window in tabpanel

I am working on extjs4, my case is:
Extjs mvc is used to build my application, viewport is the toppest container of my application, west region is a tree, center region is a tabpage container, when click the tree item, a new page with certain content will be created. then in this page, I popup a model window, this model window just mask the page, not the whole viewport, so that I can still click the tree item to open another new page.
I have achieved this, but there is a problem, if I have already open a model window in a tab, and I switch to a another tab then return back, the model window is hidden, but I still want that window to show if I haven't closed it. Can anyone help me, is there a better way except using ifram in tabpage?
app.js:
Ext.application({
name: 'SysOpv',
appFolder: '/Js/AppSysOpv/app',
autoCreateViewport: true,
controllers: [
'Category',
'Band'
]
});
Viewport:
Ext.define('SysOpv.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
initComponent: function() {
this.items = {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 80,
items: [
{ xtype: 'component', html: 'setup' }
]
}],
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 250,
xtype: 'categorytree'
}, {
id: 'maintabpanel',
flex: 1,
xtype: 'tabpanel'
}]
};
this.callParent(arguments);
}
});
Tree View:
Ext.define('SysOpv.view.category.Tree', {
extend: 'Ext.tree.Panel',
alias: 'widget.categorytree',
title: 'setup',
rootVisible: false,
useArrows: true,
hideHeaders: true,
columns: [{
flex: 1,
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name'
}],
store: 'Category',
initComponent: function() {
this.callParent(arguments);
}
});
Window View:
Ext.define('SysOpv.view.edit.Band', {
extend: 'Ext.window.Window',
alias: 'widget.editband',
title: 'Setup',
layout: 'fit',
constrain: true,
modal: true,
initComponent: function() {
this.items = [{
xtype: 'form',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
}
});
Tree Controller:
Ext.define('SysOpv.controller.Category', {
extend: 'Ext.app.Controller',
models: [ 'Category' ],
stores: [ 'Category' ],
views: [ 'category.Tree' ],
init: function() {
this.control({
'categorytree': {
itemdblclick: this.onTreeItemdblclick
}
});
},
onTreeItemdblclick: function (tree, record, item, index, e, eOpts) {
var mainTabs = Ext.getCmp('maintabpanel');
var tabId = record.get('id');
if (mainTabs) {
var checkTab = mainTabs.getComponent(tabId);
if (checkTab) {
mainTabs.setActiveTab(checkTab);
} else {
var controller;
var list;
switch (tabId) {
case '0101':
list = Ext.widget('listband');
break;
}
if (list)
{
var tabPage = mainTabs.add({
id: record.get('id'),
title: record.get('name'),
closable: true,
layout: 'fit',
items: [ list ]
});
mainTabs.setActiveTab(tabPage);
}
}
}
}
});
Module Controller:
Ext.define('SysOpv.controller.Band', {
extend: 'Ext.app.Controller',
models: [ 'Band' ],
stores: [ 'Band' ],
views: [ 'list.Band', 'edit.Band' ],
init: function() {
this.control({
'listband button[action=edit]': {
click: this.onEdit
}
});
},
onEdit: function(button, e, eOpts) {
var edit = Ext.widget('editband');
var list = button.up('gridpanel');
if (list.getSelectionModel().hasSelection()) {
var record = list.getSelectionModel().getLastSelected();
// I use renderTo here but have no effect,
// so I search in the google find a way to show the window in tab,
// and not mask all the viewport.
button.up('#0101').add(edit);
edit.down('form').loadRecord(record);
edit.show();
} else {
console.log('Not selected');
}
}
});
Below is example solution:
Ext.create('Ext.TabPanel', {
renderTo: 'container',
items: [
{
title: 'Tab 1',
itemId: 'tab1',
items: [
{ xtype: 'button', text: 'Show window', handler: function(){
var tab = this.up('#tab1'); // Find tab
var win = Ext.widget('editband'); // Find window
this.up('tabpanel').showWindow(tab, win);
} }
]
},
],
showWindow: function(tab, w){
tab.add(w);
tab.popup = w;
w.on('close', function() { // clean up after window close
delete this.popup;
}, tab, { single: true });
w.show();
},
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
Basically I've created event handler for tabchange event in which I re-show window.
Working sample: http://jsfiddle.net/aCxYU/1/

Resources