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' });
};
}
};
Related
I've just started working with Sencha Touch over the past couple days and I've run into a few questions. The main one is, when working with anything that doesn't regularly have user click interaction (titlebar, html text, etc for some random examples), is it possible to click on things like this and get a panel to appear.
I know that with buttons and other things, you have a tap, itemtap, etc, but I'm not sure about instances like this. Any help would be appreciated with examples.
Yes you can. Check out my blog post here: http://www.senchahackers.com/touch/multiple-tap-listeners-one-xtemplate/ that explains exactly how to do that.
Basically you can listen for a tap event on any element, as long as you add it to the list of 'delegates'
In your view:
listeners: {
tap: {
element: 'element',
delegate: '.app-box, .doc-box, .bubble-holder',
fn: function(e){
var url = e.target.name,
divClassName = e.delegatedTarget.className,
appbox = "app-box",
docbox = "doc-box",
bubble = "bubble-holder";
console.log(divClassName);
switch(divClassName){
case docbox :
//lets say you have an element '.doc-box' that you want to click and show the panel
// show the panel, which is a separate file, shown below
var profileController = YourApp.getController('YourController');
//call the showProfilePanelPopup() method in your controller, passing in this as the element that shows it
profileController.showProfilePanelPopup(this);
break;
case appbox :
alert(appbox);
break;
case bubble :
alert(bubble);
break;
}
}
}
}
Then in your controller:
extend: 'Ext.app.Controller',
config: {
refs: {
profilePanelPopup: {
autoCreate: true,
selector: '#profilePanelPopup',
xtype: 'profilePanelPopup'
}
}
},
showProfilePanelPopup: function(btn, action, values) {
var me = this;
var popup = me.getProfilePanelPopup();
popup.showBy(btn);
popup.on('hide', function () {
popup.destroy();
}, this);
}
Assuming you some Panel in your views directory like this:
Ext.define('App.view.ProfileNowPop', {
extend : 'Ext.Panel',
alias: 'widget.profileNowPop',
xtype: 'profilePanelPopup',
config: {
height: (Ext.os.deviceType != "Desktop") ? "35%" : 253,
cls:'profilePop',
left: '1%',
padding: 0,
top: '1%',
width: (Ext.os.deviceType != "Desktop") ? '40%' : '36%',
hideOnMaskTap: true,
modal: {
cls:'opaquemask'
},
scrollable: false,
store: 'ProfilePopStore',
model: 'App.model.ProfilePopModel',
items:[
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
id: 'gradePopField0',
cls: 'gradePopField',
style: 'background: #f7f7f5',
listeners: {
initialize: function(ele, eOpts) {
this.setReadOnly(true);
}
}
}
]
}
]
},
initialize: function() {
this.callParent(arguments);
}
});
I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:
var win;
var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile();
var data = {
f1: 'a',
f2: null
};
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'component',
autoEl: {
html: '<input type="text">'
},
listeners: {
render: function(_component) {
_component.getEl().on('keyup', function(e) {
//console.log(this);
console.log(this.dom.childNodes[0].value);
});
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data,
renderTo: Ext.get('hello-win')
}
]
});
}
win.show(this);
There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).
How can I display a list of links in this modal window?
You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox, vbox, etc.
Your code should look like this:
var win = new Ext.Window({
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'textfield',
enableKeyEvents: true,
listeners: {
keyup: function(c) {
console.log(c.getValue());
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data
}
]
});
Also you should consider using textfield component instead of creating textfield by using component with autoEl config.
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'm not sure I understand how to use profile views within a Sencha Touch 2 app.
Ext.define(App.view.phone.PhonePanel, {
extend: 'Ext.tab.Panel',
xtype: 'Compare'
config: {
items: [
{ xtype: 'PanelA' },
{ xtype: 'Panel B' }
]
}
})
Ext.define(App.view.tablet.TabletPanel, {
extend: 'Ext.Panel',
xtype: 'Compare'
config: {
layout: 'vbox',
items: [
{ xtype: 'PanelA', flex: 1 },
{ xtype: 'Panel B', flex: 1 }
]
}
})
And then within the Phone Profile, it adds "PhonePanel" as a view, and the Tablet profile adds "TabletPanel"; and then when that specific profile is loaded it only loads those additional views.
The problem I'm having is that Sencha is loading files from both profiles, and doing
this.getAview().push({xtype:'Compare'});
While the phone profile is active, it actually pushes the Tablet's version of the xtype. What is going on here?
These are the different steps to create profiles in a Sencha Touch 2 application :
Create app/profile/Base.js containing the following code
You're more likely to need a base profile if you execute the same code at the launch of the app for both the profiles. So this step is mandatory
Ext.define('App.profile.Base', {
extend: 'Ext.app.Profile',
launch: function () {
/* Custom Code */
Ext.fly('booting').destroy();
}
});
Create app/profile/Phone.js containing the following code
If you chose to go without the base controller, then be sure to extend Ext.app.Profile instead of App.profile.Base :
Ext.define('App.profile.Phone', {
extend: 'App.profile.Base',
config: {
controllers: ['Main'],
views: ['Main']
},
isActive: function() {
return Ext.os.is.Phone;
},
launch: function() {
Ext.create('App.view.phone.Main');
this.callParent();
}
});
Create app/profile/Tablet.js containing the following code
If you chose to go without the base controller, then be sure to extend Ext.app.Profile instead of App.profile.Base :
Ext.define('App.profile.Tablet', {
extend: 'App.profile.Base',
config: {
controllers: ['Main'],
views: ['Main']
},
isActive: function() {
return Ext.os.is.Tablet || Ext.os.is.Desktop;
},
launch: function() {
Ext.create('App.view.tablet.Main');
this.callParent();
}
});
Create app/view/phone/Main.js containing the following code
Ext.define('App.view.phone.Main', {
extend: 'Ext.Container',
config: {
fullscreen: true,
items: [{
html:'This is the main view for the phone profile'
}]
}
});
Create app/view/tablet/Main.js containing the following code
Ext.define('App.view.tablet.Main', {
extend: 'Ext.Container',
config: {
fullscreen: true,
items: [{
html:'This is the main view for the tablet profile'
}]
}
});
That's it. You should be all set.
Hope this helped
You are using the same xtype twice.
Think of an xtype as a short name for your component. Each component needs to have a unique shortname or it will just get overwritten by the more recent definition.
Change the above two components to something like xtype: 'tabletcompare' and xtype: 'phonecompare'.
AND
this.getAview().push({xtype:'tabletcompare'}) <br>
Or
this.getAview().push({xtype:'phonecompare'})
when referencing the objects.
Hope this helps!
I am working with the Sencha touch framework and there list item component. I have only been working with this for about 2 weeks now and I can not figure out how to get the "onItemDisclosure" to open up the "detailPanel". I am trying to follow this example: http://vimeo.com/19245335. I have pasted my code below. Any help is very much appreciated.
GoW3Guide.views.detailPanel = Ext.extend(Ext.Panel, {
id: 'detailpanel',
tpl: 'Hello, {firstName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
GoW3Guide.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});
Ext.reg('detailPanel', GoW3Guide.views.detailPanel);
GoW3Guide.views.listPanel = Ext.extend(Ext.List, {
id: 'disclosurelist',
store: GoW3Guide.ListStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
GoW3Guide.views.detailPanel.update(record.data);
GoW3Guide.views.Guidescard.setActiveItem('detailpanel');
}
});
Ext.reg('listPanel', GoW3Guide.views.listPanel);
GoW3Guide.views.Guidescard = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
items: [GoW3Guide.views.listPanel, GoW3Guide.views.detailPanel]
});
GoW3Guide.views.Guidescard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('guidescard', GoW3Guide.views.Guidescard);
Are you getting any javascript errors?
According to the docs setActiveItem either needs a component instance, a number (card index), or a config object, e.g. {xtype:'detailPanel'}
If you want to make a new detail panel active try
GoW3Guide.views.Guidescard.setActiveItem({xtype:'detailpanel'});
or
GoW3Guide.views.Guidescard.setActiveItem(new GoW3Guide.views.detailPanel());