Related
Please consider two modal windows that refer to the common container with the group of radiofield in the below fiddle.
https://fiddle.sencha.com/#view/editor&fiddle/3e45
Initially, the first radio R1 is correctly checked in containers of both windows. However, checking any radiofield on one of the windows unselects all the radiofield items on another window.
Two windows contain independent instances of the container, so it's unclear how they can affect each other. This behavior is not happening with any other elements (e.g. checkboxes), only radios.
Any ideas are very much appreciated.
Put/wrap your radio fieldset in form panel, in this case it will keep the value (yourForm.getValues()):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('fsContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.fsContainerHandler'
});
Ext.define('fsContainer', {
extend: 'Ext.form.Panel', // ---== Extending form now. ==---
xtype: 'xFSContainer',
sfx: '',
controller: 'fsContainerHandler',
items: [{
xtype: 'fieldset',
title: 'myFieldset',
reference: 'fsRef',
flex: 1,
items: [{
xtype: 'radiofield',
checked: true,
name: 'myRadio',
boxLabel: 'R1'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R2'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R3'
}]
}]
});
Ext.define('mainContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainContainerHandler',
singleton: true,
onButton1Click: function () {
var win = this.getView().window1;
win.show();
},
onButton2Click: function () {
var win = this.getView().window2;
win.show();
}
});
Ext.define('mainContainer', {
extend: 'Ext.container.Container',
width: 400,
height: 400,
controller: 'mainContainerHandler',
window1: null,
window2: null,
initComponent: function () {
this.window1 = Ext.create('window1');
this.window2 = Ext.create('window2');
this.callParent(arguments);
},
items: [{
xtype: 'button',
text: 'Window 1',
reference: 'btn1',
handler: mainContainerHandler.onButton1Click,
scope: mainContainerHandler
}, {
xtype: 'button',
text: 'Window 2',
reference: 'btn2',
handler: mainContainerHandler.onButton2Click,
scope: mainContainerHandler
}]
});
Ext.define('window1', {
extend: 'Ext.window.Window',
title: 'Window1',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.define('window2', {
extend: 'Ext.window.Window',
title: 'Window2',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.create('mainContainer', {
renderTo: document.body
});
}
});
i am using a customized DataView in my app, this DataView was set to scroll vertically and been added into a panel later.
But now the DataView cannot scroll properly, the problem is:
when i drop down the DataView, it can scroll down, but when i release my finger, it scroll back to top automatically.
could anybody help to check what's the reason?
thanks~~
here is my codes:
==============The DataView==============
Ext.define("cherry.view.UserActivityList", {
extend: 'Ext.dataview.DataView',
xtype: 'user-activity-list',
requires: [
'cherry.store.UserActivityStore',
'Ext.dataview.DataView',
'Ext.XTemplate'
],
config: {
styleHtmlContent: true,
height: '100%',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="activity-ctn">',
' <div class="activity-content">{content}</div>',
'</tpl>'
)
},
initialize: function () {
this.callParent(arguments);
var me = this;
var store = Ext.getStore('user-activity-store');
store.load();
me.setStore(store);
}
});
============Panel contains the DataView============
Ext.define('cherry.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'cherry.view.ComposeToolbar',
'cherry.view.Menubar',
'cherry.view.UserActivityList'
],
config: {
layout: 'card',
id: 'main-container-view',
scrollable: null,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'cherry',
id: 'main-toolbar',
cls: 'main-toolbar',
items: [
{
xtype: 'button',
iconCls: 'menu2',
text: 'Menu',
iconMask: true,
handler: function () {
Ext.Viewport.toggleMenu('left');
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconCls: 'loop2',
text: 'Refresh',
iconMask: false,
handler: function () {
Ext.getStore('user-activity-store').load();
Ext.ComponentQuery.query('#user-activities-list-view')[0].refresh();
}
}
]
},
{
xtype: 'compose-toolbar'
},
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
]
},
initialize: function () {
Ext.Viewport.setMenu(cherry.view.Menubar.createMenu('left'), {
side: 'left',
reveal: true
});
}
});
It seems that your error is due to the layout config in user-activity-list
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
A dataview must ALWAYS! have its layout to Auto. As stated by the constructor, which by the way you should be seeing a log error.
constructor: function(config) {
var me = this,
layout;
me.hasLoadedStore = false;
me.mixins.selectable.constructor.apply(me, arguments);
me.indexOffset = 0;
me.callParent(arguments);
//<debug>
layout = this.getLayout();
if (layout && !layout.isAuto) {
Ext.Logger.error('The base layout for a DataView must always be an Auto Layout');
}
//</debug>
}
Try removing the layout config it should fix your error.
Cheers!
I'm pretty new to web development and ExtJS, I've looked around for tutorials on more complex concepts but they are hard to find (Yes I've found the Sencha documentation but the only provide simple concepts)
I'm trying to make a dashboard for my application, in this dashboard I want a chart
that gives a detailed overview of my statistics. In order to accomplish this I am trying to add a custom filter for the chart by making a seperate list with that holds all the instances of the key, when selecting said instances from a list I want the chart to only display those selected instances.
The chart I made:
Ext.define('view.chart.LocationStatisticsPerMonth', {
extend: 'Ext.chart.Chart',
alias: 'widget.LocationStatisticsPerMonthChart',
requires: [
'store.LocationStatisticsStore',
'store.TemplateStore',
'view.TitleToolbar'
],
constructor: function () {
this.store = Ext.create('store.LocationStatisticsStore', {
autoLoad: true, sorters: [{
property: 'YearMonth',
direction: 'ASC'
}]
});
this.store.getProxy().api.read = ServerControllers.Dashboard.LocationStatisticsPerMonth;
this.callParent(arguments);
},
animate: true,
shadow: true,
border: true,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['TotalCount'],
title: false,
grid: true,
label: {
renderer: function (v) {
return String(v);
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['Location_Id'],
title: false,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'column',
axis: 'left',
gutter: 80,
xField: ['Location_Id'],
yField: ['TotalCount'],
tips: {
trackMouse: true,
width: 125,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String('Visitors: '+item.value[1]));
}
}
}]
});
My Store
Ext.define('store.LocationStatisticsStore', {
extend: 'Ext.data.Store',
requires: ['model.LocationStatistics'],
model: 'model.LocationStatistics',
autoLoad: false,
remoteSort: false,
remoteFilter: false,
filterOnLoad: true,
sorters: [{
property: ['YearMonth' , 'Location_Id'],
direction: 'DESC'
}],
proxy: {
type: 'direct',
paramOrder: [],
api: {
read: ServerControllers.Reports.GetLocationStatisticsPerMonth
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalRecords',
successProperty: 'success',
messageProperty: 'msg'
}
}
});
My Model:
Ext.define('model.LocationStatistics', {
extend: 'Ext.data.Model',
idProperty: ['Location_Id'],
fields: [
{ name: 'YearMonth', type: 'string' },
{ name: 'Location_Id', type: 'int' },
{ name: 'Year', type: 'int' },
{ name: 'Month', type: 'int' },
{ name: 'TotalCount', type: 'int' },
{ name: 'AverageCountPerDay', type: 'int' }
]
});
Would anyone be so kind as to explain this concept to me, link a tutorial or provide me an example of how to go about doing this?
Help is greatly appreciated.
EDIT: the panel that this is contained in:
Ext.define('view.panel.DashboardStatisticsPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.DashboardStatisticsPanel',
requires : [
'Ext.layout.container.Column',
'view.chart.LocationStatisticsPerMonth'
],
plain: true,
border: false,
layout: {
type: 'hbox',
padding: '10 10 10 10'
},
items: [{
xtype: 'panel',
layout: 'fit',
border: true,
flex: 1,
items: [{
xtype: 'panel',
layout: 'anchor',
border: true,
overflowX: 'scroll',
height: 400,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'label',
text: 'Select Date',
padding: '0 0 0 10'
},
{
xtype: 'combobox',
displayField: 'YearMonth',
emptyText: 'Select Date ',
queryMode: 'local',
padding: '0 0 0 10',
store: function (btn) {
btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
},
valueField: 'YearMonth',
}]
}]
/*tbar: [{
text: 'September Only',
handler: function (btn) {
var store = btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
store.clearFilter();
Ext.defer(function (btn) {
store.filter("Month", 9);
}, 300);
}
}]*/,
items: [{
xtype: 'LocationStatisticsPerMonthChart',
itemId: 'LocationStatisticsPerMonthChart',
anchor: '2000, -10',
//height: 400,
// width: 2000,
}]
}],
dockedItems: [{
xtype: 'TitleToolbar',
dock: 'top',
title: Resources.t('RegistrationsPerUnit'),
items: ['->', {
iconCls: 'iconRefresh',
itemId: 'refresh',
scope: this,
handler: function (btn) {
var store = btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
//store.removeAll();
store.load();
}
}]
}]
}]
});
The best way is to use a function, I'll give you an example:
We have a store, let's call it StoreA, and another store StoreB
var storeA = something.getStore();
var storeB = somethingElse.getStore();
storeA.filterBy(function(record) {
return storeB.find("name", record.data.name) != -1;
});
So basicly in this example, if the name is in storeB (find returns an index), it will filter it out from storeA's contents.
Unfortunately, you will have to re-do the exact same filter every time a new record is added or updated... so what I do is bind a function that does this to the load, update, delete, etc.. events.
You only need to filter the related data store. To accomplish this use the filter method as follows:
chart.store.filter("Month", 10);
You can always remove the filtering on the store by calling clearFilter store's method,
chart.store.clearFilter();
Take into account that you need to remove previous filters when applying new ones otherwise the each new applied filter will stack with the current ones
You can see a small example based on your code here. Hope it helps you to solve your problem.
I'm trying to put 3 buttons on top of an xtype:'img', but I'm getting nowhere and can't find much online about it.
How does this work?
EDIT:
i have an image and when you tap it i want it to display the same image but now there are 3 options you can choose from view download share i want the buttons to look like they pop up over the image
Ext.define('Crystal.view.apphb',{
extend: 'Ext.Panel',
xtype:'apphb',
id:'panel',
requires: [
'Ext.TitleBar',
],
config:{
layout: {
type: 'card',
animation: {
type: 'fade'},
},
items:[{
xtype:'img',
src:'resources/img/apphb.png',
listeners: {
tap: function() {
Ext.getCmp('panel').setActiveItem(1);
},
},
},
{
xtype:'img',
src:'resources/img/1.png',
listeners: {
tap: function() {
Ext.getCmp('panel').setActiveItem(-1);
}
},
}
]
}
});
What I understand from your question is simple. You want to show certain buttons in a pop up on tap of image. So you use overlays and put buttons inside it.
A working fiddle with demo is here. You can display anything in you want in this pop up.
The method .showBy() let you place pop up relative to certain element passed as parameter. Here's the code,
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
items:[
{
xtype:'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
height: 64,
width: 64,
listeners:{
tap:function( img,e,opts ){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width:160,
height:90,
items:[
{
xtype:'button',
text:'Download'
}
],
styleHtmlContent: true,
scrollable: true
});
overlay.showBy(img);
}
}
}
]
});
}
what about using img as the background for the container?
xtype: 'container',
style: 'background: url(http://wallpapers.free-review.net/wallpapers/36/New_Batman_movie.jpg) no-repeat;',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'container',
flex: 1
},
{
xtype: 'container',
height: 100,
defaults: {
margin: 5,
height: 80,
width: 100
},
items: [
{
xtype: 'button',
text: 'Like'
},
{
xtype: 'button',
text: 'Tweet'
}
]
}
]
}
IMPORTANT: THIS IS WORKING IN VERSION 2.0 AND NOT IN 2.1.1
My app has 2 different tabs at the bottom (near by, search)
Both this tab use the same list as given below.
Also both NearBy and Search use card layout, the only difference is in Near By the list is in the first card and for Search the list is in the Second card
i am trying this for last 2 day and no progress in this. Please help me
Ext.define('ChurchLookup.view.ChurchList', {
extend: 'Ext.List',
xtype: 'churchlist',
config:
{
title: 'Zip Code',
cls: 'x-contacts',
grouped: true,
store: 'Churches',
itemTpl:
[
'<div class="headshot" style="background-image:url(resources/images/church-type-logo/{icon}.png);"></div>',
'{name}, {city}',
'<span>{phone} / {email}</span>'
].join('')
}});
For Near by when the tab is clicked the list will displayed inside the tab panel.
This is working perfectly and I can see the list.
NEAR BY CARD CODE
Ext.define('ChurchLookup.view.NearBy',
{
extend: 'Ext.Panel',
xtype: 'nearbycard',
config:
{
iconCls: 'locate',
title: 'Near By',
scrollable: 'vertical',
layout:
{
type: 'card',
animation:
{
type: 'pop',
duration: 500,
}
},
items:
[
{
docked: 'top',
xtype: 'titlebar',
title: 'Near by Churches',
items:
[
{
itemId: 'btnBackNearBy',
text: "Back",
ui: "back",
hidden: true,
action: 'onBackNearBy'
}/*,
{
itemId: 'btnHomeSettings',
iconMask:true,
iconCls: 'settings',
ui: 'border',
align: 'right',
action: 'pingHomeBadge'
}*/
]
},
{
xtype: 'churchlist'
},
{
xtype: 'churchdetailsnearby'
}
],
listeners:
[
{
delegate: "#btnHomeSettings",
event: "tap",
fn: "onHomeScreenSettings"
},
{
delegate: "#btnBackNearBy",
event: "tap",
fn: "onBackNearBy"
}
]
},
onHomeScreenSettings: function ()
{
this.fireEvent("homeScreenSettings", this);
},
onBackNearBy: function ()
{
this.fireEvent("onBackNearBy", this);
}
});
But for the search when we click the "Search" tab it will show a card layout with 2 card.
The frist card is the search form and the second card is the list.
When the user fill the form and click the search button I just load the store and change the card layout to show the list.
But the card layout is showing the second page but not the list.
SEARCH TAB CODE
Ext.define('ChurchLookup.view.Search',
{
extend: 'Ext.Panel',
xtype: 'searchcard',
config:
{
iconCls: 'search',
title: 'Search',
scrollable: 'vertical',
layout:
{
type: 'card',
animation:
{
type: 'pop',
duration: 500,
}
},
items:
[
{
docked: 'top',
xtype: 'titlebar',
title: 'Search Church',
items:
[
{
itemId: 'btnBackSearch',
text: "Back",
ui: "back",
hidden: true,
action: 'onBackSearch'
}/*,
{
itemId: 'btnHomeSettings',
iconMask:true,
iconCls: 'settings',
ui: 'border',
align: 'right',
action: 'pingHomeBadge'
}*/
]
},
{
xtype: 'searchform'
},
{
xtype: 'favouritecard'
},
{
xtype: 'churchdetailssearch'
}
],
listeners:
[
{
delegate: "#btnHomeSettings",
event: "tap",
fn: "onHomeScreenSettings"
},
{
delegate: "#btnBackSearch",
event: "tap",
fn: "onBackSearch"
}
]
},
onHomeScreenSettings: function ()
{
this.fireEvent("homeScreenSettings", this);
},
onBackSearch: function ()
{
this.fireEvent("onBackSearch", this);
}
});
Maybe height problem.
Is 'churchdetailssearch' the same as 'churchlist' ?
If churchdetailssearch' has toolbar or something set layout :'vbox' to 'churchdetailssearch', and add the list of 'churchdetailssearch' flex : 1.
Maybe useful the page.
Explain how to a scrollable List use dynamic height without fixed height