I am having one "selectfield" component in my container.
I am opening floating panel for options.
I want to apply some specific CSS on that floating panel.
I have referred sencha touch doc . I have got one option (i.e. floatingCls).
I have tried to apply that also.
But it is not working.
Please guide me how do I apply Cls.
Thank You in advance.
Yeah, even I have tried using floatingCls, it ain't working. So I have tried by overriding its sencha's css class.
here it's working code shown below:
App.js file code:
Ext.application({
name: 'StackOverFlowDemo',
launch: function() {
var demo = Ext.create("Ext.form.Panel", {
fullscreen: true,
scrollable:false,
items: [
{
xtype: 'selectfield',
label: 'Choose one',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
});
Ext.Viewport.add(demo);
}
});
here its index.css code which you need to set in your html file.
index.css
.x-floating{
background-color: darkslateblue;
}
.x-panel.x-floating, .x-msgbox, .x-form.x-floating{
background-color: grey;
}
.x-innerhtml {
background-color: lightpink;
}
.x-inner x-size-monitored x-paint-monitored x-scroll-scroller{
background-color: dodgerblue !important;
}
.x-anchor{
background-color: grey !important;
}
.x-webkit .x-anchor.x-anchor-right{
background-color: grey !important;
}
.x-panel.x-floating .x-panel-inner .x-list{
background-color: lightblue !important;
}
.x-list .x-list-item.x-item-selected.x-list-item-tpl{
color:darkred;
}
.x-list-label{
}
Or you can also do it by using CSS Vars (i.e Themeing).
You can use the "cls" config of the Panel to add a custom CSS class to the panel.
Alternatively you can use the "styles" config to apply styles directly to it (although this isn't recommended - equivalent of inline styles in HTML).
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 list which contains main menu of my mobile app and is visible when user swipes to right or clicks on menu icon. I want to have the background of this list and hence main menu to be blurred.
I checked out the css filter:blur property and it can be done using that but you need to have an extra div under the div which has your content and apply filter:blur to it as shown in this Codepen
Below is my list code for sencha touch
Ext.define('MobileApp.view.SlideList', {
extend: 'Ext.List',
xtype: 'slidelist',
config: {
cls: 'slide1',
variableHeights: true,
onItemDisclosure: true,
store: 'SlideListStore',
itemTpl: ['<div class="slideImg" style="background-image:url(resources/images/{img});"></div>',
'{title}',
'<div class="settingImg" id="settingImg" style="background-image:url(resources/icons/nw-icons/settings.png);"></div>'].join(''),
listeners: {
initialize: function (comp, eOpts) {
comp.element.on(
'swipe',
function (event, node, options, eOpts)
{
/*send event as a argument to get direction of swipe*/
this.fireEvent('swipe', event);
},
comp
);
}
}
}
});
I cant figure out where to place the extra div and apply filter:blur to it. Any pointers will be helpful.
Is this what you were trying to achieve https://fiddle.sencha.com/#fiddle/4tb
Here is how you can accomplish this
Add an empty div as html property of the list
remove the background of the list
add css to blur the image
.setMyBackground {
position: fixed;
left: 0;
right: 0;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width:100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index:-1;
}
.slide1{ background:none;}
I have a list and I want have two icons per line using onItemDisclosure. How can I do that?
I don't know how to implement onItemDisclousre() on two icons but probably this will help you.
In the following example i have put an image on every itemlist and functionality is provided on itemtap event. This will serve the purpose of doing multiple tasks with single itemlist.
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help you.
bye.
You can do this by manually adding a disclosure icon inside of itemTpl on your list items. Add this inside of your view:
{
xtype: 'list',
onItemDisclosure: true,
cls: 'my-list-cls',
itemTpl: [
'<div class="x-list x-list-disclosure check-mark" style="right: 48px"></div>'
]
}
Notice that the div inside of itemTpl has the CSS class "x-list x-list-disclosure check-mark". I set style="right: 48px" because I want this icon to appear on the left side of the regular disclosure icon (the one with the right arrow) and this rule leaves enough room on the right to show the arrow icon.
Then, in your app.scss, add:
.my-list-cls {
.x-list.check-mark.x-list-disclosure:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '3';
font-family: 'Pictos';
color: #fff;
text-align: center;
text-shadow: 0 0 0;
}
}
This controls the styling for your new disclosure icon.
By setting content: '3';, you are changing the icon from the default right arrow to a checkmark. (See all of the available icons here: Pictos fonts).
The result:
It is possible but not easy. In short you have to extend class Ext.dataview.List and/or Ext.dataview.element.List.
How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?
var tabPanel=Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'DETAILS',
xtype: 'list',
cls: 'myList',
....
itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
.............
.myList .x-list-item {
max-height: 30px;
}
Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:
.my-list .x-list-item .x-list-item-label{
min-height: 0.8em !important;
overflow : auto;
}
And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.
You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight
in addition to that you can also use CSS like this to control padding:
.my-list .x-list-item .x-list-item-body{
min-height: 0.5em !important;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
use a property called as
itemHeight: [*Height of the item you need*],
i.e
itemHeight: 40
Read it from the Component's JS file
The titles on the table view have ellipsis although the horizontal space is huge. I see it in the default-style.css under .x-title .x-innerhtml. What is the proper way to adjust when it ellipses? and also if your feeling frisky the method I should use to find the answer in a situation like this would be helpful. For example, I went to the API doc for sencha and found Ext.String.ellipsis, Ext.util.Format.ellipsis, and Global_CSS.ellipsis. I see the documentation but am not sure how to approach actually changing the way ellipsis are handled.
items: [
{
xtype: 'container',
title: 'Bla Mobile',
layout: {
type: 'vbox',
pack: 'start',
align: 'center'
},
EDIT:
I added this to my style.css to fix it:
.x-title { padding:0 .3em; }
.x-title .x-innerhtml { padding: 0; }
This seems to ba a bug in webkit, I came up with this solution:
.x-title .x-innerhtml:after {
content: '';
display: inline-block;
width: .3em; /* equal to the amount of padding on the element */
}