I want to create Master/Base view for my SenchaTouch2 application. It should have header, footer and content zone. Header and footer are static, but content should be declared in concrete view.
I can't find solution for my problem in sencha docs. Maybe it's a wrong way? Any link to sencha guides would be helpful.
for this type of functionality you can use navigation view or create any one view with card layout and put two item with docked top and bottom which you want to fix and third itam change as per you want.
You should create a view that extend from Container or Panel with 3 items. You decide which xtype (panel, container, toolbar, etc.) is your header and footer and you should use the card layout and dock at the top or button: docked : 'top'
Then you can use the 3rd element and update the view according to your needs and using the model and controller as you want.
Define a new Ext.Container class with header and footer containers. And then create new instances of it and insert the content view. Something like this:
Ext.define('App.view.BaseView', {
extend : 'Ext.Container',
xtype : 'masterview',
config : {
items : [{
xtype : 'container',
height : 100,
html : 'This is header',
styleHtmlContent : true,
// docked : 'top' //if needed
}, {
xtype : 'container',
height : 100,
html : 'This is footer',
styleHtmlContent : true,
// docked : 'bottom' //if needed
}]
}
});
And use it like this:
var panel = Ext.create('App.view.BaseView');
panel.insert(1, {
xtype : 'container',
html : 'This is concrete view'
});
This is the most basic example. You can tweak it the way you want.
Related
Does anyone know how can I achieve this design using Sencha Touch 2.2.1?
I think I need two Views; A base View with the gradient and another View in another class, which contains all the view components like tabbar title, the image, text field and so on.
Does anyone have a better idea? Is it possible to do this using SASS, assigning the $page-bg-color: as linear gradient and then drawing a white rectangle inside?
You aught to be able to paste this straight into senchafiddle.com. I am by no measure a CSS expert to some of this styeling will need a closer look, but this general layout aught to work for you.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
launch : function() {
Ext.create('Ext.Container', {
fullscreen : true,
style : 'background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);',
layout : 'fit',
items : [{
xtype : 'titlebar',
title : 'Title',
docked : 'top'
}, {
xtype : 'panel',
layout : 'fit',
margin : '0 40 0 40',
items : [{
xtype : 'textfield',
label : 'Label 1',
docked : 'top'
}, {
xtype: 'image',
src : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL66d6uPSYD6skFSjiBAodALYwTvtqipcjBc5RBsLsMd_IoM94Hg',
height : '15em',
width : '15em',
centered : true
}]
}]
});
}
});
Good luck, Brad
So I have the code below, and it works except the 'plain : true', which is suppose to remove the background color of the tabs. Is it because I'm not creating the object using something like this?
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
plain: true,
If I need to do it that way how do I do the Create command from within an items list?
Ext.define('My.view.TabContainer', {
extend : 'Ext.Container',
xtype : 'tabcontainer',
layout : 'border',
items : [
{
itemId : 'theRealTabContainer',
xtype : 'tabpanel',
plain : true,
region : 'center',
items : [
{
xtype : 'company'
}
,
{
xtype : 'test'
}
]
}
]
});
No, what you're doing looks fine. This looks like a bug after testing it out, but it only happens with a border layout as it's adding 'x-border-layout-ct' that is setting the background-color. The tab panel is actually doing the right thing still. You can do 2 things:
Add a class to the container (possibly an existing plain class from extjs or your own)
Set a style on the container
Ext.create('Ext.Container', {
layout: 'border',
style: 'background-color: transparent !important',
I am trying to dynamically add list(with its items) to my container.
Instead of simple HTML template, I need list items to contain panel with a title bar, image & few more things.
To do this I am loading store data and within its callback creating List & array of items. Then I add items to the list and list to the container but end result is just last panel visible instead of sliding list of all panels.
Here is my code:
var vLists = [];
this.load({
callback: function(records, operation, success) {
var hccontainer = Ext.getCmp('hccontainer');
this.each(function(record){
var sid = 'styleStore'+record.get('id');
var styleTemplate = eval('tpls.styleTemplate_' + record.get('id'));
vLists.push({
xtype: 'panel',
scrollable: 'false',
layout: 'fit',
cid : record.get('id'),
ctype : record.get('type'),
cname : record.get('name'),
stid : sid,
tp : styleTemplate,
items: [
{
xtype : 'titlebar',
title : record.get('name'),
docked : 'top',
cls : 'x-toolbar-transparent-top'
},
{
xtype : 'image',
src : record.get('image'),
}
]
});
});
//hccontainer.remove(Ext.getCmp('hc'), true);
Ext.getCmp('hc').destroy();
var hc1 = Ext.create('Ext.dataview.List', {
layout : 'fit',
config: {
direction: 'horizontal',
id : 'hc'
}
});
hc1.setItems(vLists);
Ext.getCmp('hccontainer').add(hc1);
},
scope: this
});
Is this right way to add items or I am missing something.
PS Instead of List if I use Carousel, this works fine
Carousel is more of a layout component than List is. It doesn't look like you need to use a list, I don't see any handler for item taps for example. If you want to avoid using templates than you should not use a List. Instead just make a component with a list-like layout. I would use a container with a vbox layout, scretched horizontally and with a static height. You can then put whatever item configuration you want into this.
How can i change a xtype in Sencha Architect?
Example:
from:
xtype: 'list'
to
xtype: 'RefreshableList'
As a disclaimer, I am one of the lead engineers on the Sencha Architect product.
Drag out a List as a top level component. All top level components are their own classes. Set the userAlias and userClassName configurations to values like 'refreshablelist' and 'RefreshableList'. Take a look at the code generated for this.
Drag out a Panel as a top level component, drag the existing RefreshableList in the inspector into the new Panel. A prompt will ask you if you would like to Move, Copy or Link the list, choose "Link". This will create an instance of your subclass RefreshableList.
This is currently the best way of going about this task inside of Architect. In the case that you built your RefreshableList component outside of Architect and would like to link it in the process will be a little different. You will have to create an override and change the xtype you are instantiating there. We are attempting to address this limitation in Sencha Architect 2.2. You will be able to specify what we are currently calling a createAlias. This is what alias (xtype, ptype, type, etc) to create.
For example if you dragged out a Panel and then put a list inside of it, you could then select the list in the inspector and configure the createAlias to 'RefreshableList'. This will replace the xtype in the generated code from 'list' to 'RefreshableList'. It will NOT change what is rendered on the canvas inside of Architect. You would have to load your RefreshableList class via a JS Resource and/or the dynamic loader/requires functionality.
You have to create your own class by extending the list class and give it your own widget alias. This tutorial has all you need: http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/
UPDATE
Here is some code for a very basic custom list
//this follows the MVC structure, if you wanted you could also do something like ux.RefreshableList
Ext.define('myAppName.view.RefreshableList', {
extend: 'Ext.dataview.List',
xtype: 'RefreshableList',
config: {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
},
initialize: function() {
this.callParent();
}
});
How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.
Should I implement this:
Straight into index.html
Somehow add it in the view which holds the menu as well
Some other magical way
The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
});
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
Ext.create('Ext.Panel', {
html: 'Floating Panel',
left: 0,
padding: 10
}).showBy(button);
For your top view, I would use something along the lines of a Ext.TabPanel though.
http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel