I wanted to ask for help cause I can't find any apropriate answers.
I'm developing an app which has 2 modules, one left and one right side that i can enable/disable with a toggle. Each side has a picture with a slider below. The slider has 4 steps which change the pictures. Now I want the pictures to have a fade animation onChange. I can't find an example that comes close enough to my problem.
Here is the code:
{
xtype: 'container',
name: 'rightContainer',
flex: 1,
padding: '2',
items: [
{
xtype: 'container',
id: 'containerr',
flex: 1,
html: '<img src="boerse_icon1.png" />',
margin: 25,
},
{
xtype: 'container',
flex: 1,
docked: 'bottom',
items: [
{
xtype: 'sliderfield',
id: 'sliderr',
disabled: true,
value: 0,
minValue: 0,
maxValue: 3,
margin: 25,
flex: 1,
listeners: {
change: function( me, Slider, thumb, newValue, oldValue, eOpts) {
if (newValue == 0) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon1.png" />');
}
if (newValue == 1) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon2.png" />');
}
if (newValue == 2) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon3.png" />');
}
if (newValue == 3) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon4.png" />');
}
}
}
}
]
}
]
}
this is just the right container. I'm running Sencha Touch framework 2.0
TIA
What you need to do is basically:
Create a panel with the following layout:
layout: {
type: 'card',
animation: {
type: 'fade',
duration: 2000
}
}
Then you create a slider with a listener on the change event:
listeners: {
change: function(me, Slider, thumb, newValue, oldValue, eOpts) {
panel.setActiveItem(newValue);
}
}
Fill the panel with items (images) and you are good to go.
Just for the sake of it I've put together a working Senchafiddle for you to experiment with:
Senchafiddle example
Hopefully this helps you!
May be this work.
{
xtype: 'container',
id: 'containerr',
showAnimation :'fadeIn',
flex: 1,
html: '<img src="boerse_icon1.png" />',
margin: 25,
},
Related
I have a grid and one of the columns prepresents a progress bar. I need to set a tooltip "Progress 4 of 10" over the progress bar. Initially it was like this:
columns: [
{
translatable: {
text: 'progress'
},
tdCls: 'highlight',
xtype: 'widgetcolumn',
dataIndex: 'progress',
widget: {
cls: 'percentage-bar',
text: ' ',
align: 'center',
xtype: 'progressbar',
defaultListenerScope: true,
listeners: {
afterrender: function (bar) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: bar,
html: Dict.translateAndReplace(
'step',
[
bar.getWidgetRecord().get('current_step') === 0 ? 1 : bar.getWidgetRecord().get('current_step'),
bar.getWidgetRecord().get('total_steps')
],
'%d'
)
});
if (bar.getValue() === 1) {
bar.addCls('progress-complete')
}
},
},
},
width: 100
},
The issue is - it works only for a single page. When there are several pages or I apply filtering or sorting, event "afterrender" is not triggered. So it's triggred only then the grid is loaded, not the content. I need either to change to target element or use renderer. I tried to play arroung with renderer, but also stuck. How to get current cell container?
columns: [
{
translatable: {
text: 'progress'
},
tdCls: 'highlight',
xtype: 'widgetcolumn',
dataIndex: 'progress',
width: 100,
widget: {
cls: 'percentage-bar',
text: ' ',
align: 'center',
xtype: 'progressbar',
defaultListenerScope: true,
},
renderer: function (value, metaData, record) {
let HowToGetTheContainer = "?????";
var tip = Ext.create('Ext.tip.ToolTip', {
target: HowToGetTheContainer,
html: Dict.translateAndReplace(
'step',
[
record.get('current_step') === 0 ? 1 : record.get('current_step'),
record.get('total_steps')
],
'%d'
)
});
if (value === 1) {
Ext.down().addCls('progress-complete')
}
}
},
How to get that variable "HowToGetTheContainer"?
Within the renderer function, you can add a tooltip with this code (this works on other column types as well, not only on widgetcolumn):
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', 'This is my tooltip here');
This was not a part of your question, but to customise the widget in the widgetcolumn, for example to add the progress-complete style, instead of using Ext.down(), you can use the onWidgetAttach function of the column:
columns: [{
xtype: 'widgetcolumn',
onWidgetAttach: function(col, widget, record) {
widget.setIconCls('xxx')
widget.addCls('xxx')
widget.setText('xxx');
// etc
},
}]
I have a border layout with two panels inside center and west regions. By default, west panel is collapsed and if you click on any part of the title bar while is collapsed, the panel is temporary expanded until you move the mouse pointer out of its boundaries.
What I want to do is to have this same "temporary expand" not by clicking on the panel's title bar, but just hovering over it. How can I make that possible?
Here is my code:
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'West Panel',
region: 'west',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
Please refer to the following fiddle for your convenience: http://jsfiddle.net/3FJ58/3/
Thanks in advance!
Yes, this is possible but you have to extend from Ext.panel.Panel to override the getPlaceholder method that is used by the borderlayout
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder,
floatable = me.floatable,
titleCollapse = me.titleCollapse;
if (!placeholder) {
if (floatable || (me.collapsible && titleCollapse)) {
listeners = {
mouseenter: {
// titleCollapse needs to take precedence over floatable
fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
element: 'el',
scope: me
}
};
}
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
id: me.id + '-placeholder',
listeners: listeners
}));
}
// User created placeholder was passed in
if (!placeholder.placeholderFor) {
// Handle the case of a placeholder config
if (!placeholder.isComponent) {
me.placeholder = placeholder = me.lookupComponent(placeholder);
}
Ext.applyIf(placeholder, {
margins: me.margins,
placeholderFor: me
});
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
}
return placeholder;
}
See the updated JSFiddle
Overriding is at least the cleanest way IMO. But it would also be possible to manipulate the placeholder created by the borderlayout.
#JoseRivas already posted something like this but with some issues I will add the snipped how this can be done in a cleaner way
listeners: {
afterrender: function(p){
p.placeholder.getEl().on('mouseenter', function(){ p.floatCollapsedPanel() })
}
}
See the updated JSFiddle
jacoviza. Can you try to capture focus event of panel. this link helps you. Extjs panel. Keyboard events
add a listener to the el of the placeholder for mouseover and then call the floatCollapsedPanel()
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
}, {
xtype: 'panel',
title: 'panel2',
region: 'west',
flex: 1,
id: 'mypanel2',
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true,
listeners: {
afterrender: {
fn: function (self) {
self.placeholder.getEl().on('mouseover', function () {
var panel = Ext.getCmp('mypanel2');
panel.floatCollapsedPanel()
})
}
}
}
}]
}).show();
});
I was wondering if it's possible to not to allow the user to close the item again when it's open, meaning to let it close only when i click on another item in the accordion.
hope it's clear enough.
I'm adding the code:
Ext.define('application.view.SystemHealth', {
extend: 'Ext.Container',
alias: 'widget.globalSynchronization',
requires: ['infra.view.views.BoxHeader',
'application.view.SystemStatusHeader',
'application.model.SystemHealth',
'application.store.SystemHealth',
'infra.utils.pvs.SyncJobRunningStep',
'application.view.CostCalculation',
'application.view.SystemStatusHeader',
'application.view.DataCollector',
'application.view.PublicCloudConnection',
'Ext.layout.container.Accordion'
],
layout:{
type:'vbox',
align:'stretch'
},
header: false,
cls: ['global-synchronization'],
syncJobStatus: null,
initComponent: function() {
var me = this;
me.store = Ext.create('itfm.application.store.SystemHealth');
me.store.load({scope: me, callback: me.onLoadDone});
Ext.apply(me, {
items: [
{
xtype: 'boxHeader',
width: '100%',
title: itfm.application.T.GlobalSynchronizationTitle
},
{
xtype: 'label',
width: '90%',
html: itfm.application.T.GlobalSynchronizationDescription,
margin: "0 0 30 10"
}
]
});
me.callParent(arguments);
},
onLoadDone: function(records, operation, success){
var me =this;
var accordionItemsMargin = '0 0 30 0';
me.accordion = Ext.create('Ext.panel.Panel', {
margin: "0 0 30 10",
defaults:[{
layout:'fit',
height:'100%',
width:'100%'
}] ,
layout: {
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true,
fill : true,
collapseFirst :true
},
items: [
{
height: 180,
xtype: 'dataCollector',
autoScroll:true,
margins: accordionItemsMargin,
store: records[0].dcModule()
}
,
{
xtype: 'costCalculation',
margins: accordionItemsMargin,
store: records[0].ccModule()
},
{
xtype: 'publicCloudConnection',
margins: accordionItemsMargin,
store: records[0].pcModule()
}
]
});
me.add( me.accordion);
}
});
thanks for the help
What you want is that nothing happens when the user click on the currently expanded panel, instead of collapsing and expanding the next one, is that right?
Unfortunately, there's no built-in option for that... If you really want it, you'll have to override Ext.layout.container.Accordion and implement it yourself.
Edit
In fact most of the collapsing/expanding code lies in the Ext.panel.Panel class.
This simple override seems to be enough to do what you want. Apparently this method is used only for collapse listeners, so it shouldn't have any adverse effect (unless the method is also used somewhere in your code...).
Ext.define('Ext.ux.Panel.JQueryStyleAccordion', {
override: 'Ext.panel.Panel'
,toggleCollapse: function() {
if (this.collapsed || this.floatedFromCollapse) {
this.callParent();
}
}
});
See this fiddle.
I was able to override the accordion with the following
Ext.define('itfm.application.view.SystemHealthAccordion', {
extend: 'Ext.layout.container.Accordion',
alias: ['layout.systemHealthAccordion'] ,
constructor: function() {
var me = this;
me.callParent(arguments);
},
onComponentExpand: function(comp) {
var me = this;
me.callParent(arguments);
var button = comp.down('tool');
button.setDisabled(true);
},
onComponentCollapse: function(comp) {
var me = this;
me.callParent(arguments);
var button = comp.down('tool');
button.setDisabled(false);
}
});
inside the class of the first item of the accordion, there is a need to do the following:
me.on('boxready', me.disableTools);
},
// disable the click on the item in case it's open
disableTools: function(){
var me = this;
var button = me.getHeader().down('tool');
button.setDisabled(true);
}
so when the first item is open it will have the same behaviour
I have this view that I want to slide in:
Ext.define('GS.view.AddBidView', {
extend: 'Ext.Panel',
config: {
xtype: 'panel',
modal: true,
width: '100%',
height: '50%',
bottom: '0%',
hideOnMaskTap: true,
items: [{
xtype: 'textareafield',
name: 'bio',
clearIcon: false,
id: 'textarea',
placeHolder: 'Ange ditt bud här...'
},
{
xtype:'button',
text: 'Lägg bud',
docked:'bottom',
maxWidth: '95%',
minHeight: '45px',
cls: 'saveBidBtn'
}]
},
initialize: function() {
this.down('#textarea').on('keyup', this.grow, this);
this.textarea = this.element.down('textarea');
this.textarea.dom.style['overflow'] = 'hidden';
},
grow: function() {
this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content
this.getScrollable().getScroller().scrollToEnd();
}
});
It is rendered by this controller:
Ext.define('GS.controller.ShowModal', {
extend : 'Ext.app.Controller',
config : {
control : {
'button[action="showBidModal"]' : {
tap : 'showModal'
},
}
},
showModal : function() {
var addBidPanel = Ext.create('GS.view.AddBidView');
Ext.Viewport.add(addBidPanel);
}
});
How can I animate this with a slide up/slide down or similar? Tried a bunch of stuff but nothing seems to work.
All help is appreciated!
One way is to hide the modal by default:
hidden: true
Then you can apply showAnimation and hideAnimation to show and hide your modal with specified animation, for example:
showAnimation: {
type: 'slideIn',
duration: 1000,
direction: 'down'
},
hideAnimation: {
type: 'slideOut',
duration: 1000,
direction: 'up'
},
Here is a working fiddle: http://www.senchafiddle.com/#6tN6b
i'm working on extjs and came across one small problem it is , wen i resize the window everything works fine execpt for the disabled component....
before resizing the browser the disabled component looks fine
but after resizing the browser the panel and button behind the disabled css are exanding but the css does not
here's the code:
var topdetailpanel = new Ext.Panel(
{
flex: 1,
padding: 1,
disabled: false,
monitorOrientation:true,
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
stretchX: true,
items: [
{
xtype: 'button',
id: 'topdetailid',
flex: 1,
baseCls: 'round',
monitorOrientation:true,
stretchX: true,
html: noresult,
handler: function ()
{
window.location = 'DetailsPanel.html?type=' + typeval + '&event=' + eventval + '&price=' + priceval + '&free=0&pos=1'
}}]
});
var bottomdetailpanel = new Ext.Panel(
{
flex: 1,
id: 'ctrlBtn2',
padding: 1,
monitorOrientation:true,
disabled: true,
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
stretchX: true,
items: [
{
xtype: 'button',
flex: 1,
monitorOrientation:true,
id: 'bottomdetailid',
baseCls: 'round',
stretchX: true,
html: noresult,
handler: function ()
{
window.location = 'DetailsPanel.html?type=' + typeval + '&event=' + eventval + '&price=' + priceval + '&free=0&pos=2'
}}]
});
and for disabling i use :
bottomdetailpanel.setDisabled(true);
please help.......................
Thank you in advance.......
hey check this my friend faced the same issue..might be it will help you.
http://www.sencha.com/forum/showthread.php?115984-1.0-Form-Orientation-Change-incomplete-redraw
and in case you got the right answer somewhere please post it back here..