Develop Reference

add picker on container extjs

Hi everyone I should add the Ext.form.field.Picker to my Custom Component but I can't figure out if it is possible.
createStructure: function () {
this.add({
xtype: 'container',
cls: 'logo-avatar-messages',
height: 50,
maxHeight: 50,
style: 'background-color: #ccc; border-radius: 50%; vertical-align: middle;',
width: 50,
layout: 'center',
flex: 1,
items: [
{
xtype: 'label',
style: 'font-size: 25px; IMPORTANT!; color: #ffffff;',
listeners: {
afterRender: function (component) {
var utente = userData.get('denominazione');
if (utente !== 'ND') {
var alias = utente.split(' ')[0][0] + utente.split(' ')[1][0];
component.setText(alias);
}
},
}
}
]
});
}
})

Quoting the documentation available here for the pickerfield:
"An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox menu list or a date picker".
So maybe what you are looking for is a combobox, a field that extend/implement the pickerfield. You can heavy customize the template of each single row available for selection with the tpl config to show complex html elements without re-inventing the wheel.
To give you an example of what you can do with the tpl config, like showing an html table for each record available for selection:
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item" style="border-bottom:1px solid #f0f0f0;">',
'<table>',
'<tr>',
'<th width="100">ORDER ID: </th><td>{orderId}</td>',
'</tr>',
'<tr>',
'<th>ORDER TYPE: </th><td>{orderType}</td>',
'</tr>',
'<tr>',
'<th>DESCRIPTION: </th><td><i>{orderDescription}</i></td>',
'</tr>',
'<tr>',
'<th>DATE: </th><td>{orderDate:date("d/m/Y")}</td>',
'</tr>',
'</table>',
'</div>',
'</tpl>'),

How to add extra element in data view while using tpl

How to add extra element in data view while using tpl.
I am using tpl with itemselector. Now I have add some extra div in that which is not coming from the store. How to add that ?
Here is my data view
onPanelLoad : function( panel , width , height , eOpts){
var mypanel = panel.query('#somepanel')[0],
imageStore = Ext.create('Ext.data.Store', {
id:'imagesStore',
model: Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
}),
data: [{
src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
caption: 'Drawing & Charts'
}, {
src: 'http://www.sencha.com/img/20110215-feat-data.png',
caption: 'Advanced Data'
}, {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
caption: 'Overhauled Theme'
}]
});
var imageTpl = new Ext.XTemplate(
/* My Try
'<tpl for=".">',
'<div class="item box-wrap">',
'<div class="content-box app-category" style="width:160px; height:160px;">',
'<div class="content-item">',
'<img src="{src}" />',
'</div>',
'</div>',
'</div>',
*/
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
if(mypanel)
mypanel.add([{
layout:'vbox',
items:[{
xtype : 'dataview',
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
}]
}]);
This is what I am trying to add.
'<tpl for=".">',
'<div class="item box-wrap">',
'<div class="content-box app-category" style="width:160px; height:160px;">',
'<div class="content-item">',
'<img src="{src}" />',
'</div>',
'</div>',
'</div>',
When I am trying I am getting Uncaught TypeError: Cannot read property 'internalId' of undefined
Any work around for this?

Please take a look at the fiddle, which does not have the problem.
I added both types of itemTpl.
Please check if you are readding items, that way you might get duplicated IDs.
I added the dataview via items inside the view and tried it on the load event of the store. Both work.
Please be aware I added some styling to app.css, which should not be your problem
MORE INFO
You can load additional data to a store creating a record using the model with data.
I updated the fiddle.

Ext.form.field.ComboBox show Description

I am using the code below for 10 fields but i want make 5 of my fields show (abbr - name) and the the other show only the (abbr) how i can reach this goal.
NOTE: this code is from http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.form.field.ComboBox
Thanks in advance,
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>'
)
});

One possible approach is to use Ext.XTemplate. The following working example shows the first two items differently, based on condition.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
var template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">',
'<tpl if="xindex<=2">',
'{abbr}',
'<tpl else >',
'{abbr} - {name}',
'</tpl>',
'</div>',
'</tpl>'
);
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
tpl: template
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>

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
)
}

Extjs Combo diplay value - if value is not found

I am using this technique to accomplish an auto-complete feature for a combo box http://cdn.sencha.com/ext-4.1.1a-gpl/examples/form/forum-search.html , it returns name and type of a car, sometimes the type is unknown so nothing returns, I would like it to be "No Data" so I used this valueNotFoundText: 'No Data' but didn't work
xtype: 'combo',
store: s,
hideTrigger:true,
typeAhead: false,
id: 'search',
queryMode: 'remote',
queryParam: 'query',
displayField: 'name',//+'type',
valueField: 'name',//+'type',
//valueNotFoundText: 'No Data',
,listConfig: {
loadingText: ' Loading...',
getInnerTpl: function() {
return '{name}'+'<br>'+'<p><font size="1">{type}'+':type</font></p>';
}
,
}
, listeners: {

I guess you are looking for sort of this (simplified working example.)
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
typeAhead: true, // this will simply show the typed text if nothing is found.
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr}</div>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="name.length == 0"> ',
'no data', // You can return any other additional value or formating here
'<tpl else>',
'{name}', // You can return any other additional value or formating here
'</tpl>',
'</tpl>'
),
valueNotFoundText: 'no data' // this will be displayed if no record is found after setValue()
});
Here's a working JSFiddle
So how does this work
Simply set the Template for the dropdown menu (if this is needed at all in your case) and set the template for the display field.
Both examples are simplified cause I do not know your entire template.
Updated examples
Note: I would not use type as property-name cause this is sort of a reserved name, cause it identifies the type of the field object/primitive
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name','ctype'],
data : [
{"abbr":"AL", "name":"Alabama", "ctype":"AL"},
{"abbr":"AK", "name":"Alaska", "ctype":"AK"},
{"abbr":"AZ", "name":"Arizona", "ctype":""}
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
typeAhead: true, // this will simply show the typed text if nothing is found.
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="ctype.length == 0"> ',
'<div class="x-boundlist-item">{name}<p><font size="1">no data</font></p></div>',
'<tpl else>',
'<div class="x-boundlist-item">{name}{ctype}<p><font size="1">{ctype}</font></p></div>',
'</tpl>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="itype.length == 0"> ',
'no data',
'<tpl else>',
'{name}',
'</tpl>',
'</tpl>'
),
valueNotFoundText: 'no data', // this will be displayed if no record is found after setValue()
renderTo: Ext.getBody()
});
JSFiddle

You can use the emptyText config option on in the list config http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.AbstractView-cfg-emptyText. ComboBoxes internal list class BoundList extends from View so it follows the same api. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-listConfig
listConfig: {
emptyText: 'No Data'
}