Develop Reference

Inner widgets disappear after page reload

I am having an issue with my nested widgets. There's two widget container (full-width and TwoColumn), which share pretty much same code for configurations but different html code; as well as, 4 different types of widgets that are nested inside any of the previous containers.
So, I can create any type of container and it sill remain on the page. However, only nested widgets in full-width container get saved. Meaning that if I reload the page, the content of TwoColumn containers, is missing.
Please find below code for both containers:
Full-width
module.exports = {
extend: 'apostrophe-widgets',
label: 'Row Block',
contextualOnly: true,
addFields: [
{
type: 'area',
name: 'row',
label: 'row',
contextual: true
}
],
construct: function(self, options) {
var superPushAssets = self.pushAssets;
self.pushAssets = function() {
superPushAssets();
self.pushAsset('stylesheet', 'always', { when: 'always' });
};
}
};
TwoColumn
module.exports = {
extend: 'apostrophe-widgets',
label: 'Two column row Block',
contextualOnly: true,
addFields: [
{
type: 'area',
name: 'twoColumnRow',
label: 'twoColumnRow',
contextual: true
}
],
construct: function(self, options) {
var superPushAssets = self.pushAssets;
self.pushAssets = function() {
superPushAssets();
self.pushAsset('stylesheet', 'always', { when: 'always' });
};
}
};

Sencha Touch Load a different View on click

This is my first attempt on Sencha Touch. So please excuse me if I am asking any silly questions.
I am trying to follow clean MVC pattern from Sencha. on Home page when user clicks I want to load AdboutView, I am not sure what is wrong in this code, but it doesn't fire "onGoToAboutMeCommand"
app.js
Ext.application({
name: "HaBoMobile",
models: ["HomeModel"],
stores: ["HomeStore"],
controllers:["HomeController"],
views: ["HomeView", "AboutView"],
launch: function () {
var homeLandingView = {
xtype: "LandingView"
};
var aboutView = {
xtype: "AboutView"
};
Ext.Viewport.add([homeLandingView, aboutView]);
}
});
HomeView.js
Ext.define("HaBoMobile.view.HomeView", {
extend: "Ext.navigation.View",
fullscreen:true,
requires: "Ext.form.FieldSet",
alias: "widget.LandingView",
config: {
//scrollable: 'vertical',
items: [
{
title: 'Harsha Bopuri',
padding: 10,
items: [
{
itemId: "aboutButton",
xtype: 'button',
text: 'About me',
handler: function () {
this.fireEvent("goToAboutMeCommand", this);
}
}
]
}
],
//Not sure when I have handler, if I still need listeners?
listeners: [
{
delegate: "#aboutButton",
event: "tap",
fn: "onAboutButtonTap"
}
]
},
onAboutButtonTap:function(){
this.fireEvent("goToAboutMeCommand", this);
},
onBackButtonTap: function () {
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
HomeController.js
Ext.define("HaBoMobile.controller.HomeController", {
extend: "Ext.app.Controller",
config: {
refs: {
homeView: "HomeView"
},
control: {
homeView: {
goToAboutMeCommand: "onGoToAboutMeCommand"
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
// Commands.
onGoToAboutMeCommand: function () {
console.log("onBackToHomeCommand");
this.showAboutMe();
},
onBackToHomeCommand: function () {
console.log("onBackToHomeCommand");
this.shoHomePage();
},
showAboutMe: function () {
Ext.Viewport.animateActiveItem(this.getAboutView(), this.slideRightTransition);
},
shoHomePage: function () {
Ext.Viewport.animateActiveItem(this.getHomeView(), this.slideRightTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
var homeStore = Ext.getStore("HomeStore");
homeStore.load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
});

I think the problem is in your refs section of your controller,refs takes key value pair.key can be any reference and while value is used in ComponentQuery.
I would suggest to add xtype in your HomeView.js file,like below.
Ext.define("HaBoMobile.view.HomeView", {
extend: "Ext.navigation.View",
xtype: 'HomeView',
//-----

Button handler that fires goToAboutMeCommand event runs in the scope of the button but in the controller you listen to homeView so the event is never caught.
This button handler should work:
handler: function (btn) {
var hv = btn.up('homeView');
hv.fireEvent("goToAboutMeCommand", hv);
}

Backbone multiple instance of a same view used inside tabs

I'm working with backbone I'm trying to create a tab view that uses inside panels to render in this case same instance of a table view. My problem is that when the second instance renders removes the first one even though I've been debuging the code and I can see 2 diferent objects for each view.
Here is the code to create object:
var tabs = new Dashboard.Tab({
id: 'reward-tab',
panels: [{
id: 'active-panel',
active: true,
label: 'Actives',
content: new Dashboard.Table({
id: 'active-table',
model: new Dashboard.TableModel(null,{
active: true
})
})
},{
id: 'dismiss-panel',
active: false,
label: 'Not active',
content: new Dashboard.Table({
id: 'dismiss-table',
model: new Dashboard.TableModel(null,{
active: false
})
})
}]
});
Tab view code
Dashboard.Tab = Backbone.View.extend({
template : Handlebars.templates['tabs.hbs'],
panels: [],
events: {
'click .nav-tabs li a' : 'onTabClick'
},
initialize: function() {
this.id = this.options.id;
this.panels = this.options.panels;
},
onTabClick: function(e) {
e.preventDefault();
...
},
render:function(){
//Renders places holders
this.$el.html(this.template({
id: this.id,
tabs : this.panels
}));
$.each(this.panels, function(index, panel){
if(panel && panel.content) {
panel.content.on('ready', function(){
$('#' + panel.id).append(panel.content.el);
});
}
});
}
});
Table code:
Dashboard.Table = Backbone.View.extend({
tableId: 'my-table',
initialize: function() {
var me = this;
this.tableId = this.options.id;
this.model.fetch({reset: true}).done(function () {
me.render();
});
....
},
render: function() {
....
this.trigger("ready");
}
});
Like I said, my problem seem that for some reason the second view its removing the html for the first instance and only rendering the second one.
Any help will be appreciate.
Thanks

I got a AHA moment and I thought the problem could be that I wasn't defining a different el to each view.
When you don't Backbone creates the view inside a generic div element so in this case what I did was to add a new element for each and that made the trick.
The Fix:
var tabs = new Dashboard.Tab({
id: 'reward-tab',
panels: [{
id: 'active-panel',
active: true,
label: 'Actives',
content: new Dashboard.Table({
id: 'active-table',
el: $('<div class="active-table"></div>'),
model: new Dashboard.TableModel(null,{
active: true
})
})
},{
id: 'dismiss-panel',
active: false,
label: 'Not active',
content: new Dashboard.Table({
id: 'dismiss-table',
el: $('<div class="not-active-table"></div>'),
model: new Dashboard.TableModel(null,{
active: false
})
})
}]
});

html with value from function

Im really new to this java script and Sencha touch so sorry if this question is simple but I didn't find a way to do this.
I have a function that returns a value .
now I want to display the value from the function inside an html line.
how im calling this function from html element? how I show the value?
config: {
title: 'Me',
iconCls: 'user',
//layout: 'fit',
/* create a title bar for the tab panel */
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Singers'
},
{
html: [
'<h1>Hi!! ' + this.setName +'</h1>'
].join("")
}
],
},
setName: function (val) {
var store =Ext.getStore('user');
var last = st.last('user');
return val=(last.get('user'));
}
});

You could use the itemId property to reference the component and then update its html property via the initialise listener.
For example:
config: {
title: 'Me',
iconCls: 'user',
//layout: 'fit',
/* create a title bar for the tab panel */
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Singers'
},
{
itemId:'htmlContainer', //use itemIds like div ids
xtype:'container',
html: ''
}
],
/**
* #cfg listeners
* Parent Component listeners go here.
* Check sencha touch doc for more information and other available events.
*/
listeners:{
initialize: 'onInitialise'
}
},
onInitialise: function()
{
//set the html config item here
var c = this.down('#htmlContainer');
c.setHtml(this.setName());
},
setName: function (val) {
....
}

Creating and Defining base view for backbone.js

I am attempting to extend backbone views to add a basic implementation of a layout "skeleton". This will be used to piece together a page using the different components. The problem as listed below is the scope changes for all the nested object layout pieces. Could I create closures for all of these that point to the same scope or am I limited to a single object tier? Maybe I am thinking about it wrong?
define(['backbone', 'underscore'
], function (backbone, _) {
var base = backbone.View.extend({});
_.extend(base.prototype, {
sections: {
head: {},
body: {
nav: {},
main: {
header: {
title: "",
description: "",
inner_html: function () {
return this.render().el
},
menu_items: [],
changed: false,
scripts: function () { }
},
content: {
title: "",
description: "",
inner_html: function () {
return this.render().el
},
scripts: function () { }
},
buttons: {
items: [], // { id: "save", value: "Save" }, { id: "edit", value: "Edit" }
changed: false,
scripts: function () { }
}
},
footer: {}
}
}
});
return base;
});

This looks a lot like Marionette's Layout views and regions. You may not need to write this yourself. I often use the Layout,Regions, and specialized views from Marionette without the App and Module portions.