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
})
})
}]
});
Related
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' });
};
}
};
I'm trying to integrate Raphael with enyo.js to create SVG component using Raphael instead of through enyo so i can use some of the Raphael functionality. I would like to replace the div that is rendered by default with it child component svg, i have created below jsfiddle. Can anyone help me fix it?
http://jsfiddle.net/stackit/uzjafamo/8/
Code
enyo.kind({
name: "Board",
kind: "enyo.Control",
paper: null,
create: function(){
this.inherited(arguments);
},
rendered: function(){
this.inherited(arguments);
if(this.hasNode()){
paper = Raphael(this.hasNode().id, 100, 100);
}
}
})
enyo.kind({
name: "pages",
kind: "enyo.Control",
create: function(){
this.inherited(arguments);
this.loadView();
},
loadView: function(){
if(!this.$.board){
var com = this.createComponent({
name: "board",
kind: "Board",
},{
owner: this
});
com.render();
}
}
});
new pages().renderInto(document.getElementById("cans"));
I looked at your fiddle and saw a little bit that could be improved. The jsFiddle container was giving me some trouble though initially, until I forked it for some reason.
Here's what I came up with: http://jsfiddle.net/Djspaceg/5qyLej05/4/
enyo.kind({
name: "Board",
kind: "enyo.Control",
paper: null,
create: function () {
this.inherited(arguments);
},
rendered: function () {
this.inherited(arguments);
if (this.hasNode() && !this.paper) {
this.generateRaphael();
}
},
generateRaphael: function () {
this.paper = Raphael(this.hasNode().id, 100, 100);
}
});
enyo.kind({
name: "pages",
kind: "enyo.Control",
create: function () {
this.inherited(arguments);
this.loadView();
},
loadView: function () {
if (!this.$.board) {
var com = this.createComponent({
name: "board",
kind: "Board",
});
com.render();
}
}
});
new pages().renderInto(document.getElementById("cans"));
It just generates an empty Raphael canvas.
Cheers!
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) {
....
}
I defined a class 'IMS.SellMgt.testForm'.when i click the button 'submit',i want to get 'var test = this.formPanel;',why test is null? if i want to get this.formPanel,how can i do?Thank you!
Ext.define('IMS.SellMgt.testForm', {
formPanel: null,
LoadForm: function () {
this.formPanel = new Ext.form.Panel({
renderTo: 'form-ct',
frame: true,
title: 'XML Form',
width: 300,
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}
]
}],
buttons: [{
text: 'Submit',
handler: function () {
var test = this.formPanel;
}
}]
});
}
});
Ext.onReady(function () {
var frmTest = Ext.create('IMS.SellMgt.testForm', {});
frmTest.LoadForm();
});
try something like:
......
handler: function () {
var test = this.findParentByType(Ext.form.FormPanel);
}
....
handler is a simpler way of specifying a click event listener for the button. Since it is short hand, it has some drawbacks.
With handler, the context of the function is always the button. In other words, this inside the handler function is the button, not your form.
In order for this to be your class, use a listener with a scope specified:
buttons: [{
text: 'Submit',
listeners: {
click: function() {
this.formPanel; // will work now
...
},
scope: this // this is the key
}
}]
You can also use up to find the form:
handler: function() {
var form = this.up('form');
...
}
I'm trying to get my test project working and have it set out with various viewports js files for each screen. I have now managed to load the data onto the screen with the code below however I am struggling with trying to set-up the onItemDisclosure function so that it switches to a detailed view which shows more information about the selection item.
MobileApp.views.Settings_screen = Ext.extend(Ext.Panel, {
title: "Settings ",
iconCls: "settings",
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: "toolbar",
title: "Settings"
}],
initComponent: function() {
detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),
this.list = new Ext.List({
id: 'indexlist',
store: MobileApp.listStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: false,
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
});
this.items = [this.list];
MobileApp.views.Settings_screen.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('settings_screen', MobileApp.views.Settings_screen);
I have tried to put some code here to switch to the detailPanel but it comes up with an undefined error.
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
Thanks Aaron
You need to define this panel under Settings_screen's namespace, like this:
this.detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),
Also, you need to add the detailPanel to the Settings_screen's items, so that it will become an item of it.
this.items = [this.list, this.detailPanel];