Develop Reference

How to display the message below the comboBox dropdown

I created a comboBox,
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr} - {name}',
'</tpl>'
)
});
below the drop down I wanted to display some messages.
Can anybody give some idea which component I will use or how to display some message below the drop down. Please check in screenshot.

You can override the renderTpl of Ext.view.BoundList, like:
listConfig: {
renderTpl: [
'<div id="{id}-listWrap" data-ref="listWrap"',
' class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '">',
'<ul id="{id}-listEl" data-ref="listEl" class="', Ext.baseCSSPrefix, 'list-plain"',
'<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>',
'>',
'</ul>',
'<div style="border: solid 3px #000; padding: 2px;">Message</div>',
'</div>',
'{%',
'var pagingToolbar=values.$comp.pagingToolbar;',
'if (pagingToolbar) {',
'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
'}',
'%}', {
disableFormats: true
}
],
}
Working example: https://fiddle.sencha.com/#view/editor&fiddle/23g4

Remove field firing event click in afterLabelTextTpl

I want to remove a form field, firing a click event in a afterLabelTextTpl.
However, I am not able to remove each field individually.
Fiddle: https://fiddle.sencha.com/#fiddle/1ie7
The two span textfields has the same id. It must be so because the text fields are added dynamically from a standard textfield

If you cannot set the id individually, you can set the id to be unique by taking advantage of the way the XTemplate in beforeLabelTextTpl generates markup. One way to do this is to append the field's generated id to the word 'icon' (or some other prefix):
'<span id="icon{id}" ...
When rendered, this will replace {id} with the field's id property. Then you can refer to this unique id in the afterrender handler:
var simboloEl = Ext.get("icon" + field.id);
Fiddle: https://fiddle.sencha.com/#fiddle/1iek

This happen because you use same id's for both fields and when you click on first one it works for second one also.
Please Check Fiddle:https://fiddle.sencha.com/#fiddle/1ien
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false,
beforeLabelTextTpl: [
'<tpl>',
'<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>',
'</tpl>'
],
listeners: {
afterrender: function(field){
var form = this.up('form');
var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]);
//var simboloEl = Ext.get("icon");
if(simboloEl){
simboloEl.on("click", function () {
form.remove(field);
});
}
}
}
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false,
beforeLabelTextTpl: [
'<tpl>',
'<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>',
'</tpl>'
],
listeners: {
afterrender: function(field){
var form = this.up('form');
var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]);
//var simboloEl = Ext.get("icon1");
if(simboloEl){
simboloEl.on("click", function () {
form.remove(field);
});
}
}
}
}],
renderTo: Ext.getBody()
});

Create a Scrollable Data-view in Sencha Touch 2

I am trying to create a horizontal scroll list which can be swiped left or right (something like Tinder, but with the option to come back to a previous content)
This is what I am trying to create:
http://postimg.org/image/5jcurf1q1
This is what I have been able to get so far:
http://postimg.org/image/4o7h33w9h/
The problem is I am not able to make dataview item to stay within the boundaries of the mobile screen
What I have done till now to get this is:
Use a dataview
Set inline wrap to false
inline: {
wrap: false
}
Set scrollable to 'horizontal'
scrollable: 'horizontal'
Set the following layout:
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
},
CSS set for the dataview:
.dataview-base {
background-color: #cacacd;
}
CSS set for the dataview items:
.dataview-item {
border-right: 1px solid #000;
border-left: 1px solid #000;
border-top: 5px solid #59535E;
border-bottom: 5px solid #59535E;
padding:20px;
margin: 0px 20px 0px;
}
How can I achieve what I am trying to achieve ? I am pretty sure it has to do with the CSS of the dataview and the dataview items but I am not sure what ?
Any help would be highly appreciated.
Here is the complete Main.js view
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.DataView'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'dataview',
height: '100%',
styleHtmlContent: true,
inline: {
wrap: false
},
itemCls: 'dataview-item',
baseCls: 'dataview-base',
itemTpl: [
'<div class="arHeadline">',
' {Headline}',
'</div>',
'<div class="arbyline">',
' {Author}',
'</div>',
'<div class="arcontent">',
' {Content}',
'</div>'
],
store: 'Discovers',
scrollable: 'horizontal',
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
},
},
{
xtype: 'toolbar',
docked: 'top',
title: 'Summary'
}
]
}
});
Thank you

My suggestion is using carousel instead of dataview. You can also load data into it: Loading a Carousel from a Store in Sencha Touch 2?

Sencha Touch: how to get config from tpl?

With Sencha Touch, I created a component to display a table for my mobile application.
Here's my component code:
Ext.define('MyApp.components.table.Table', {
extend: 'Ext.Container',
xtype: 'table',
config: {
cls: 'myTableCSS',
scrollable: 'vertical',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<table>',
'<tr>',
'<tpl for="headers">',
'<th>{html}</th>',
'</tpl>',
'</tr>',
'<tpl for="rows">',
'<tr class="{[this.config.id]}" >',
'<tpl for="columns">',
'<td>{html}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>'
}
});
Here's my view implementation:
xtype: 'table',
id: 'myRedTable',
data: [
{
headers: [
{ html: 'firstname' },
{ html: 'lastname' },
{ html: 'age' }
],
rows: [
{
columns: [
{ html: 'John' },
{ html: 'Smith' },
{ html: '38' },
]
}
]
}
],
In my component, when I use {[this.config.id]} I would like to get the id of my view implementation (i.e. myRedTable) but it doesn't work.
Is there any solution to achieve this?

It seems you wrote the syntax for inline arbitrary code correctly, but there's a problem with scope. this refers to the instance of Ext.XTemplate itself, not the table view.
You should try another way to get the reference of your table instance instead, for example, in your table's definition file:
initialize: function(){
var me = this;
me.setTpl('Ext.XTemplate',
// blah blah ...
// now you can use "me" to refer to your table instance
)
}

Sencha Touch List 'sticks' when in a Panel with other elements

I have a Panel where I would like to have some other elements in it and a list. When I have the list in the parent panel on it's own, the list functions properly. However, when I add another item to the parent panel, the list now won't scroll downward (it's no longer constrained to the size of the screen).
This is how I'd like my layout to be:
Viewport
|--------------------|
| Revenue Panel |
|--------------------|
| EventList |
| |
|--------------------|
Though the list appears to be getting rendered offscreen for all of the data in it's store.
This is what I have for my view:
DashboardIndex.js
shopifymobile.views.DashboardIndex = Ext.extend(Ext.Panel, {
dockedItems: [
{
xtype: 'toolbar',
title: 'SHOP NAME',
dock: 'top',
defaults: {
iconMask: true,
ui: 'plain'
},
items: [
{xtype: 'spacer'},
{
iconCls: 'refresh',
listeners: {
'tap' : function(){
shopifymobile.stores.onlineEventStore.load();
}
}
}
]
}
],
layout: 'fit',
fullscreen: true,
});
Revenue.js
shopifymobile.views.RevenuePanel = Ext.extend(Ext.Panel, {
styleHtmlContent: true,
flex: 1,
items: [
{
tpl: [
'<div class="revenuepanel">',
'<div id="revenuedata">',
'<h3 class="label">TODAY\'S REVENUE</h3>',
'<p>{revenue}</p>',
'</div>',
'<div id="orderdata">',
'<div id="orders">',
'<p><span class="label">ORDERS</span>{count}</p>',
'</div>',
'<div id="items">',
'<p><span class="label">ITEMS</span>{items}</p>',
'</div>',
'</div>',
'</div>'
],
}
],
updateWithRecord: function(record){
Ext.each(this.items.items, function(item){
item.update(record.data);
});
},
//*************HACK FIXME***********************
fetchStoreData: function(){
var store = shopifymobile.stores.onlineProductStore;
this.updateWithRecord(store.getAt(0));
store.removeListener('load', this.fetchStoreData);
},
initComponent: function(){
shopifymobile.stores.onlineProductStore.addListener('load', this.fetchStoreData, this);
shopifymobile.stores.onlineProductStore.load();
shopifymobile.views.RevenuePanel.superclass.initComponent.apply(this, arguments);
}
});
EventList.js
shopifymobile.views.EventList = Ext.extend(Ext.Panel, {
layout: 'fit',
items: [
{
id: 'eventList',
xtype: 'list',
store: shopifymobile.stores.onlineEventStore,
itemTpl: [
'<div class="eventitem">',
'<div id="eventdata">',
'<ul>',
'<li>New {verb}</li>',
'<li>{message}</li>',
'<ul>',
'</div>',
'<div id="eventtime">',
'<p>{created_at}</p>',
'</div>',
'</div>'
]
},
],
initComponent: function(){
shopifymobile.views.OrderList.superclass.initComponent.apply(this, arguments);
}
});
When I initialize my Viewport I add a new RevenuePanel and Eventlist to a dashboardIndex object:
shopifymobile.views.dashboardIndex.add(new shopifymobile.views.RevenuePanel());
shopifymobile.views.dashboardIndex.add(new shopifymobile.views.EventList());
The only way I can get the list to somewhat work is if I set it to fullscreen, but since i have a toolbar on the bottom of my screen the last item is being overlapped by it.

The way I've done this is to embed the list inside of a panel, and that panel containing should use layout:fit. I've also had to specify width :100% in the containing panel but that may vary based on your specific case. Here's what I did - note that I'm also using DataVIew and not Panel as the list base, but it should work either way.
var panel = new Ext.Panel({
flex: 1,
frame:true,
autoHeight: true,
collapsible: true,
width: '100%',
layout: 'fit',
items: [
new Ext.DataView({.....} ) ] } );