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'
}
Related
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.
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>
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
I have a store with which i am populating a list. The store is as follows:
Ext.define('EventReminder.store.Upcoming', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.SQL'],
config: {
autoLoad: true,
storeId: 'Upcoming',
model: 'EventReminder.model.Event',
proxy: {
type: 'sql',
database: 'EventReminder',
table: 'NewEvents'
},
sorters: [{property: 'date', direction: 'ASC'}]}
});
The list is as follows:
{
xtype: 'list',
flex: 1,
autoDestroy: false,
itemId: 'upcomingEventList',
onItemDisclosure: true,
store: 'Upcoming',
cls: 'event-list',
scrollable: true,
}
I have created an XTemplate for this list as follows:
var xtpl = new Ext.XTemplate(
'<tpl for=".">',
' <tpl if="priority == \'high\'">',
' <div class = "color-event-high">',
' <div class="event-category">{category}</div>',
' <div class="event-date">On: {date} at: {eventTime}</div>',
' <div>Alert at : {alertTime}</div>',
' <div class="event-people">People: {people}</div>',
' <div class="event-message">{message}</div>',
' <div class="event-priority">{priority}</div>',
' <div class="event-activities">{activities}</div>',
' </div>',
' </tpl>',
'</tpl>'
);
Here i want to give a styling based on the priority value of the list item. I have set the tpl of the list as follows in the view's initialize function as follows:
this.down("#upcomingEventList").setItemTpl(xtpl);
I Normally specify ItemTpl for a list directly in its config and don't know much about using XTemplates. So when i use the above Xtemplate the list doesn't show the items. I've checked the documentation and but could'nt understand how these XTemplates work. I've seen other answers for similar questions but did'nt help much.
Is this the correct way to write an XTemplate for a List, if we want some conditional styling based on the list items?
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
)
}