I have an sample application where i am binding the store data to the list using itemtpl, I have little confusion on how to change the color and size of first two list items when i am dynamically binding data to list from store.
This my sample code :
Ext.define('Sample.view.SearchResultView', {
extend: 'Ext.Panel',
requires: [
'Ext.List',
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.Toolbar',
'Ext.TitleBar'
],
alias: "widget.searchresultpage",
config: {
scrollable: true,
items: [
{
xtype: 'list',
layout:'fit',
height:500,
title: 'Search Results',
store: 'MySearchStore',
itemTpl: '<table><td><tr height=10%>{BlockNo}</tr><tr height=90%><p>{ShortDescription}</p></tr></td></table>'
)
}
]
},
});
You need to add a cls attributes to your list like :
cls:'myList'
and then add this in your CSS File :
.myList .x-list-item:nth-child(1),
.myList .x-list-item:nth-child(2) {
color: #CCC;
font-size:14px;
}
Hope this helps
you can set font and color in itemTpl itself.
itemTpl: '<table><td><tr height=10%><font size="12" color="#990000">{BlockNo}</font></tr>
<tr height=90%><p><font size="8" color="#990000">{ShortDescription}</font></p></tr></td>
</table>'
Related
I have the following custom component build
Ext.define('TRA.view.MainMenuItemView', {
xtype: 'mainmenuitem',
extend: 'Ext.Container',
text: 'Menu text',
icon: './resources/icons/Icon.png',
tap: function(){
},
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
width: '115px',
height: '115px',
style: 'border-radius: 50%; background-color: #e4e4e6',
items: [
{
xtype: 'image',
src: '',
width: '65px',
height: '65px',
centered: true
}
]
},
{
xtype: 'label',
html: '',
margin: '5px 0',
style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;'
}
]
},
initialize: function() {
var me = this;
me.callParent(arguments);
//set icon
me.getAt(0).getAt(0).setSrc(me.icon);
//set text
me.getAt(1).setHtml(me.text);
//setup componet event
me.element.onAfter('tap', me.tap);
}
})
and I'm using it on other containers as this
{
xtype: 'mainmenuitem',
text: 'Signal Coverage',
icon: './resources/images/icon-signal-coverage.png',
tap: function() {
var nav = Ext.ComponentQuery.query('#mainnavigationview')[0];
nav.push({
title: 'Signal Coverage',
html: 'test Signal Coverage'
});
}
}
Quite strangely it all works all well normally except when I build the sencha app for native or for web build using sencha cmd
sencha app build production
the production version does not overwrite icon and text properties of my custom component. while it all works well on normal version. what could be issue?
first of all, some ideas to make your code easier readable for others:
1) the first item does neither have an xtype nor does a defaultType define it
2) width: '115px', height: '115px', just could be width:115,height115
3) instead of me.getAt().getAt() define an itemId for these and use me.down('#theItemId')
3a) or use Ext.Component to extend from and add a template with references. That way it's me.referenceElement
4) me.onAfter('tap',... not sure if this will work on an item that does not support the tap event. you might need to set a tap event to me.element and from there you can use a beforetap
5) instead of add me.getAt().getAt().setText(me.text) use the updateText: function(newValue) {this.getAt().getAt().setText(newValue)}
Same for the icon
then my personal opion
Personally I never expected this code to run anyways. But the fix might be to write me.config.icon and me.config.text
Solution
It's a matter of timing. While the constructor runs there are no icon or text defined inside the config.
This happends only on initialize. there you have them inside the config.
go and add icon: null, text: '' to the config of the component and it will word with getter and setter.
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
In Rally App SDK 2.0, I would like to show a dropdown and button in line, and a chart below. The button would export (save as) the chart as a jpeg.
1) how do I specify the div to render objects to? The below code ignores the renderTo
2) is there sample code for exporting a jpeg image? using Canvas generates error
this.add({
xtype: 'rallycombobox',
fieldLabel: 'Select an Enterprise Release',
width: '500px',
renderTo: Ext.get("dropdownDiv"),
storeConfig: {
autoLoad: true,
model: 'Program',
fetch: 'Name,Releases,ReleaseStartDate,ReleaseDate',
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
},
listeners: {
select: this._onSelect,
scope: this
}
});
this.add({
xtype: 'rallybutton',
text: 'Export',
renderTo: Ext.get("buttonDiv"),
handler: function() {
var canvas = document.getElementById("chartDiv");
var img = canvas.toDataURL("image/jpeg");
// .toDataURL generates error, TypeError: canvas.toDataURL is not a function
document.write('<img src="'+img+'"/>');
}
});
this.add({
id: 'chartCmp',
xtype: 'rallychart',
renderTo: Ext.get("chartDiv"),
flex: 1,
chartConfig: chartConfig
});
// here is the body statement, removed <> so it will show
body
table
tr
td
div id="dropdownDiv" style="height:50px; width:500px;"/div
/td
td
div id="buttonDiv" style="height:50px; width:50px;"/div
/td
/tr
/table
div id="chartDiv"/div
/body
In Ext there are two ways to get a component rendered. The first is by adding a config object with an xtype to a container. That would be the this.add(); lines in your app. The second is by instantiating the component using Ext.create and specifying a renderTo in its config.
this.add({xtype: 'component', html: 'hello world'});
Ext.create('Ext.Component', { html: 'hello world', renderTo: 'aDiv' });
The preferred way is the first since then your component participates in the layout of the app. Also the preferred way for creating dom elements in an app (especially for initial layout) is through the items config rather than static html in the app body.
So:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{ xtype: 'container' itemId: 'dropdownDiv' },
{ xtype: 'container', itemId: 'chartDiv' }
]
});
And then you can add content in the launch method like so:
this.down('#chartDiv').add(chartConfig);
As far as your canvas question goes I'm not sure. You may want to post that as a separate question with more details on the specific error.
I have two questions regarding component layout using Sencha Touch 2:
How can you right align text in a container?
How can you concatenate different bits of dynamic data intermixed with static data into a component that needs to line wrap?
I have a view that I want to render like this:
Where the "Seen:" text is static and right aligned, and the text on the right is a concatenated string with 3 dynamic pieces of text and two pieces of static text.
I have something that works, but it doesn't feel right.
xtype:'container',
layout:{
type:'hbox'
},
items:[
{
xtype:'container',
flex:1,
layout:{
type:'hbox'
},
items:[
{
xtype:'spacer',
layout:'fill'
},
{
xtype:'label',
layout:'fit',
html:'Seen:'
}
]
},
{
xtype:'label',
name:'contentLabel',
flex:5,
html:'[BUILD A STRING AND SET THE HTML HERE]'
}
]
Right-aligning
So to right-align the text, I basically used an hbox container with a spacer component on the left and a label on the right. There's got to be an easier way.
Concatenating
I am able to build the string that I want to place on the right, but I'd rather have multiple labels that I can map one-to-one with my model. It doesn't feel like MVC for me to have to write code to concatenate strings.
I tried breaking apart the right side into an hbox, but there were problems with line wrapping. Each label wants to render itself individually, so if there were wrapping, it would happen within its own container.
Are there easier ways of doing what I am attempting?
Right aligning: it can be done with the text-align CSS property. In the example below I use the style property for simplicity, but using the cls property would be more flexible - it adds a CSS class to the component, so you can style it in the .sass file.
Concatenating: you can use the standard join() Javascript function. It concatenates all elements of an array into a string using the given separator. In my example dynamic1 and dynamic2 are variables.
So the result code:
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
html: ['static1', 'static2', dynamic1, 'static3', dynamic2].join('')
}
]
EDIT
You can also use the tpl property to define a template that renders data property. You can update it programatically calling container.setData()
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
data: {
name: 'Harry Potter',
day: 'Saturday',
date: 'October 21, 2011'
},
tpl: [
'{name} on {day} {date}'
]
}
]
How to have 2 lists in one single panel in sencha touch 2?
I can see the first list if i use
layout:'card'
I tried :
layout: {
type: 'vbox',
align: 'stretch'
}
Please let me know how can i have 2 lists inside the same panel.
You need to use the flex config on each of your list.
You can see and example below here : Sencha Fiddle
Hope it helps
create panel with vbox layout inside it create two panel with fit layout and put every list into respective panle
try this method
Hi #Akshatha you can try this into your Ext.Panel,
...
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'list',
width: '40%',
flex: 1,
styleHtmlContent: true,
...
},
{
xtype: 'list',
width: '60%',
flex: 0.5,
styleHtmlContent: true,
...
},
]
...
You can define the width of Panel and you have Ext.List.
I hope help you. :)