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>
Related
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 am developing a small web page that uses Ext.XTemplate and have a problem with displaying view in the index.html. However, it works fine when I've created Ext.XTemplate in the items of my panel. The problem is that I have all the info in json file, so I need a store that is one of the advantages of Ext.view.View.
Help me please create a view in that panel.
P.S. I should use a class that extend panel.Panel as the task is concerned about it.
My first class
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name:'position', type:'string' },
{ name:'title', type:'string' },
{ name:'rate', type:'string' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/app/view/main/data.json',
method:'GET',
reader: {
type: 'json',
root: 'foo'
}
},
autoLoad: true
});
var notiTpl = new Ext.XTemplate(
'<h1>TIOBE rate</h1>',
'<table>',
'<tr>',
'<td>Position on 2015</td>',
'<td>Programming language</td>',
'<td>Rate</td>',
'<td>Group</td>',
'</tr>',
'<tpl for=".">',
'<tr <tpl if="values.position%2 == 1">style="background-color: silver;"</tpl>>',
'<td>{position}</td>',
'<td>{title}</td>',
'<td>{rate}</td>',
'<tpl if="values.position<3">',
'<td>A</td>',
'<tpl elseif="values.position<5">',
'<td>B</td>',
'<tpl else>',
'<td>C</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>');
Ext.define('App.view.main.List', {
extend: 'Ext.view.View',
xtype: 'mainlist',
store: store,
tpl: notiTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'There is no text',
renderTo: Ext.getBody()
});
My view
Ext.define('App.view.main.Main', {
extend: 'Ext.panel.Panel',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'App.view.main.List'
],
items: [{
title: 'Some html text',
items: [{
xtype: 'mainlist'
}]
}]
});
my index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>App</title>
<script type="text/javascript" src="ext/build/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="b0beccc4-d014-4af3-919d-fd0a75c6c656" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
my app
Ext.application({
name: 'App',
extend: 'App.Application',
requires: [
'App.view.main.Main'
],
//
mainView: 'App.view.main.Main'
//-------------------------------------------------------------------------
});
How do I vertical align the dropdown to top in the example below? (Trying to get it to work in sencha fiddle)
Ext.application({
name : 'Fiddle',
launch : function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Loooooong Looooong looooooong looooooong looooooong',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
}
});
Give a baseBodyCls to the combobox & in CSS give vertical-align:top; to that class.
Ext.application({
name : 'Fiddle',
launch : function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Loooooong Looooong looooooong looooooong looooooong',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
baseBodyCls:'vertical-align-body',
renderTo: Ext.getBody()
});
}
});
.vertical-align-body{
vertical-align:top;
}
<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
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
)
}
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'
}