I am trying to add images to a nested list using the getItemTextTpl method of NestedList. Can you please take a look at the following code and let me know how to fix it? This was developed using Sencha Architect. Thanks for your help.
Ext.define('myapp.view.ListContainer', {
extend: 'Ext.Container',
alias: 'widget.listcontainer',
config: {
layout: {
type: 'fit'
},
tpl: [
''
],
items: [
{
xtype: 'nestedlist',
id: 'myList',
itemId: 'mynestedlist4',
detailCard: {
xtype: 'mytabs'
},
store: 'myStore',
toolbar: {
xtype: 'titlebar',
docked: 'bottom',
ui: 'dark'
}
}
],
listeners: [
{
fn: 'getItemTextTpl',
event: 'getItemTextTpl',
delegate: '#myList'
}
]
},
getItemTextTpl: function(node) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Ext.define('myapp.view.myList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.mynestedlist',
config: {
id: 'myList',
detailCard: {
xtype: 'mytabs'
},
displayField: 'text',
store: 'myStore'
},
getItemTextTpl: function(recordnode) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Just a quick tip. FontAwesome is a great way to add beautiful icons easily to you application.
Related
I want to add the data(array) to a sencha list. I just can't bind the data. Not sure whether list is not refreshed or data is not added to the list.
My Store:
Ext.define("ListDemoApp.store.ListDemoStore", {
extend: "Ext.data.Store",
config: {
storeId: 'listdemostore',
model: "ListDemoApp.model.ListDemoModel"
}
});
My Model:
Ext.define("ListDemoApp.model.ListDemoModel", {
extend: "Ext.data.Model",
config: {
fields: ["name"]
}
});
My MainView:
Ext.define('ListDemoApp.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
id:'vwmain',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'button',
id: 'listdemobtn',
text:'Load Data'
}
]
}
});
MyListView:
Ext.define("ListDemoApp.view.DemoListView", {
extend: 'Ext.Panel',
xtype: 'demolistview',
id: 'vwdemolist',
requires: [
'Ext.dataview.List',
'Ext.XTemplate',
'ListDemoApp.store.ListDemoStore'
],
config: {
items: [
{
xtype: 'label',
html: 'testing...',
id: 'lblsml'
},
{
xtype: 'list',
id: 'namelist',
itemTpl: "{name}"
}
]
}
});
And My controller:
Ext.define("ListDemoApp.controller.ListDemoController",
{
extend: "Ext.app.Controller",
config: {
refs: {
'mainvw': '#vwMain',
'demoList': '#vwdemolist'
},
control: {
'#listdemobtn':
{
tap: 'store'
}
}
},
store: function () {
//var dataresult;
var group_store = Ext.getStore("listdemostore");
var demodata = [{ "name": "AAA" }, { "name": "BBB" }, { "name": "CCC" }]
if (this.getDemoList() == undefined) {
Ext.Viewport.setActiveItem({ xtype: "demolistview", id: "vwdemolist" });
}
else {
Ext.Viewport.setActiveItem(this.getDemoList());
}
var lst = Ext.getCmp('namelist');
var lbl = Ext.getCmp('lblsml');
lbl.setHtml(demodata[0]['name']);
//lst.setStore(null);
//lst.setData(demodata);
group_store.add(demodata);
//group_store.load();
lst.setStore(group_store);
//lst.refresh();
//// lst.setData(demodata);
}
});
The data is not binded to the list. I was able to set the label html from array but not able to bind the list.
Any help will be appreciated.
please refer this code, it might help you. (I have already explained this in the comment)
Ext.define("ListDemoApp.view.DemoListView", {
extend: 'Ext.Panel',
xtype: 'demolistview',
id: 'vwdemolist',
requires: [
'Ext.dataview.List',
'Ext.XTemplate',
'ListDemoApp.store.ListDemoStore'
],
config: {
layout:'fit'
items: [
{
xtype: 'label',
html: 'testing...',
id: 'lblsml'
},
{
xtype: 'list',
id: 'namelist',
itemTpl: '{name}',
store:'ListDemoStore'
}
]
}
});
I'm creating a sencha touch app and the design requires a segmented button in the tab bar.
Is there an easy way to do this with sencha built-in features or do I have to create that by myself (add a toolbar with the segmented button as an item and create all the controls to actually get the same thing)?
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
tabBar: {
layout: {
pack: 'center',
},
items: {
xtype: 'segmentedbutton',
allowDepress: false,
listeners: {
initialize: function() {
Ext.SegmentedButton.implement({
setActive: function(activeItem) {
this.setActiveItem(activeItem);
}
});
}
}
}
},
autoDestroy: true,
activeItem: 1,
items: [
{
title: 'HIGHLIGHTS',
xtype: 'highlightview',
id: 'highlightView'
},
{
title: 'KATEGORIEN',
xtype: 'categoryView',
id: 'categoryView',
},
{
title: 'SUCHE',
xtype: 'searchView',
id: 'searchView',
}
],
}
That's what I tried so far. the listener is there to get around the error of [Object] Object has no method 'setActive', but doesn't result in the behaviour I'd like it to have.
//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton'
],
xtype: 'album',
id: 'album',
enter code here`enter code here`
fullscreen: true,
config: {
cls:[
'styles'
],
scrollable: 'vertical',
items: [
{
xtype: 'panel',
title: 'Close Case',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
height: 50,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
alert("foo");
itemId: "newButton11"
}
},
{
text: 'Option 2',
handler: function() {
alert("foo");
}
},
{
text: 'Option 3',
handler: function() {
alert("foo");
}
}
]
}
]
}
],
listeners: [
{
delegate: "#newButton",
event: "tap",
fn: "onNewButtonTap"
}
]
},
onNewButtonTap: function () {
//write your function here and it will work
}
//This is working for me just let me know if it works for you.
Is it possible to link to a tab.Panel view and have the second or third (not the first) tabItem be selected?
Currently i have a view that's linking to a tab.Panel that looks like this:
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
}
});
As of now when i load in the view, 'xtype-of-view-1' is set as the active tab.
But is it possible to load in the tab.Panel view but having one of the other tabs active and pressed?
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
},
initialize: function() {
var items = this.getItems(),
itemIdx,
Ext.each(items, function(item, idx) {
if (item.xtype == 'xtype-of-view-2') {
itemIdx = idx;
return false;
}
});
this.setActiveItem(itemIdx);
}
});
you could also watch the awesome video guide http://docs.sencha.com/touch/2-0/#!/video/tabs-toolbars
You have to add a controller to you app. in controller add a reference
refs: {
myview: 'myview',
list: 'anotherview list'
},
control : {
list: {
itemtap: 'onListItemTap'
}
},
onListItemTap: function (ct) {
var myview = this.getMyview();
myview.setActiveItem(1)
}
Please get read the sencha tutorial if you have no clue about MVC in sencha touch. Eg. http://docs.sencha.com/touch/2-0/#!/guide/controllers
you cand add bello config in to tab.panel
activeItem :2
for active third item insted of first
I'm starting to play around with sencha touch 2 and ran into the following problem.
I'm trying to build a very simple application which has a listview and a tabpanel with a button :
I'm seeing the tabpanel with my button and nice title; but the listview refuses to show; i've tried adding 'layout: fit' but it's even worse.
What 'obvious' thing am I missing here ?
Main.js:
Ext.define('CurrencyFX.view.Main', {
extend: 'Ext.Panel',
requires: [
'CurrencyFX.view.Home',
'CurrencyFX.view.CurrencyList',
],
config: {
items: [
{ xtype: 'homecard' },
{ xtype: 'currencycard' },
]
}
});
Home.js:
Ext.define('CurrencyFX.view.Home', {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar'],
xtype: 'homecard',
config: {
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Currency FX',
items: [
{
text: 'Refresh',
align: 'right',
action: 'reloadQuotes'
}
]
}
]
}
});
CurrencyList.js:
Ext.define('CurrencyFX.view.CurrencyList', {
extend: 'Ext.List',
requires: ['CurrencyFX.store.Currencies'],
xtype: 'currencycard',
config: {
itemTpl: '{name} is at {value}',
store: 'Currencies',
}
})
Can you add a height to the currencycard? This provides a quick check:
items: [
{ xtype: 'homecard'},
{ xtype: 'currencycard', height: 500 }
]
Here's a layout that will fill the screen (note that I moved docked: 'top' to here!!):
Ext.define('CurrencyFX.view.Main', {
extend: 'Ext.Panel',
requires: [
'CurrencyFX.view.Home',
'CurrencyFX.view.CurrencyList'
],
config: {
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'homecard',
docked: 'top'
},
{ xtype: 'currencycard'}
]
}
});
I started to use the Sencha Touch 2 MVC, but I can't overcome the problem below.
I have an Ext.application code:
Ext.application({
name: 'ProjectName',
appFolder: APP_URL + "app",
enableQuickTips: true,
extend: 'Ext.app.Controller',
phoneStartupScreen: 'LOGO.png',
controllers: ['Site'],
views: ['Viewport_login', 'Viewport_reg'],
layout: 'vbox',
launch: function() {
//bootstrap
Ext.create("Ext.Container", {
requires: [
],
items: [
Ext.create("ProjectName.view.Viewport_login", {}),
Ext.create("ProjectName.view.Viewport_reg", {})
]
});
return true;
}
});
view 'Viewport_login' code:
Ext.define('ProjectName.view.Viewport_login', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Login',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_login");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.login")
]
});
this.callParent();
}
});
View 'Viewpoer_reg' code:
Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Reg',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_reg");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.reg")
]
});
this.callParent();
}
});
view 'Header' code:
Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',
requires: [
'Ext.Img'
],
initialize: function() {
console.log("header inited");
},
config: {
cls: 'bg-holder',
items: [
Ext.create("Ext.Img", {
src: BASE_URL + 'assets/images/header3.png',
height: 35,
width: "100%",
style: "background-position: center 0px; "
})
]
}
});
And finally the 'Site' controller's code:
Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',
config: {
views: ['Viewport_login', 'Viewport_reg']
},
init: function() {
console.log('Init site controller');
// Start listening for events on views
this.control({
// example of listening to *all* button taps
'#login_button': {
tap: function () {
// HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
}
}
});
},
renderRegFOrm: function() {
},
onLaunch: function() {
console.log('onLaunch site controller');
},
});
First, I have a problem right now: The 'Header' does'nt appear if I load both views ('Viewport_login', 'Viewport_reg') in Container which created in Ext.application launch function. Can anyone help me, why?
Second, in the Controller code you can see the this.control(... section. How can I switch to other view in here?
From looking at your code, it appears that you only want one of login and register to appear at one time. I would recommend looking at the setActiveItem method for containers and switching views in this way.
I didn't understand your first question. Also, didn't understand why you have widget.login and widget.reg classes when you already have views called login and reg (can't you just use those?)