Related
I have MVC app, it's a Tab Panel containing few Tabs with a chart on each, there is also a Date Picker with Refresh button, and a Combo box to choose which data source is being used for the 'Date Range'.
The app currently loads the charts with all available data but the purpose is to select 1 of 3 available data sources, select a date range and refresh every chart tab by clicking a button, how do I do it?
Fiddle sample
Something like this:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 800,
width: 800,
layout: 'border',
defaults: {
collapsible: false,
split: true,
},
items: [{
title: 'PanelCenter',
xtype: 'tabpanel',
region: 'center',
itemId: 'centerPanel',
bodyPadding: 10,
activeTab: 0,
items: [{
title: "Tab1",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 7,
}, {
name: 'metric three',
value: 5,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab2",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 3,
}, {
name: 'metric two',
value: 5,
}, {
name: 'metric three',
value: 10,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab3",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 3,
}, {
name: 'metric three',
value: 9,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}]
}, {
xtype: 'form',
title: 'PanelTop',
layout: {
type: 'hbox',
},
region: 'north',
border: false,
bodyPadding: 10,
height: '100',
width: '100%',
margin: '0 0 5 0',
region: 'north',
items: [{
xtype: 'combo',
name: 'data_type',
itemId: 'dataTypeSelect',
emptyText: 'Select date type',
displayField: 'source',
store: {
fields: ['code', 'source'],
data: [{
code: 'created',
source: 'Sales date'
}, {
code: 'invoice',
source: 'Invoice date'
}, {
code: 'bookIn',
source: 'Order date'
}]
},
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateFromSearchField',
fieldLabel: 'From',
labelAlign: 'right',
name: 'from_date',
format: 'd/m/Y',
maxValue: new Date(),
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateToSearchField',
fieldLabel: 'To',
labelAlign: 'right',
name: 'to_date',
format: 'd/m/Y',
maxValue: new Date(),
value: new Date(),
padding: '0 30 0 0',
allowBlank: false
}, {
xtype: 'button',
itemId: 'refreshButton',
region: 'center',
text: 'Refresh',
formBind: true,
handler: function () {
const formData = this.up('panel').getValues();
if (
formData.data_type && formData.from_date && formData.to_date
) {
const tabPanel = Ext.ComponentQuery.query('tabpanel#centerPanel')[0];
const cartesianCharts = tabPanel.query('cartesian');
Ext.Array.each(cartesianCharts, function (cartesianChart) {
cartesianChart.getStore().load({
params: formData,
callback: function (records, operation, success) {
},
scope: this
});;
}, this);
}
}
}],
}]
});
I am trying to display the items in my panel like that:
I tried to use layout absolute, but like that the text "Device selected" disappear and it is only visible the button "Anzeigen".
Using instead layout column this is the result:
How can I fix the UI so to display the items like in the first picture?
This is my code:
Ext.define('Traccar.view.chart.Chart', {
extend: 'Ext.panel.Panel',
xtype: 'chartView',
requires: [
'Traccar.view.chart.ChartController'
],
layout: 'column',
//layout: 'absolute',
controller: 'chart',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
},
tbar: {
componentCls: 'toolbar-header-style',
defaults: {
xtype: 'button',
disabled: true,
tooltipType: 'title'
},
items: [{
xtype: 'tbtext',
html: 'Statistics',
baseCls: 'x-panel-header-title-default'
}, {
xtype: 'tbfill',
disabled: false
}, {
handler: 'showMap',
reference: 'showMapButton',
glyph: 'xf279#FontAwesome',
stateful: false,
enableToggle: false,
disabled: false,
tooltip: Strings.centerlisttomap
}]
},
items: [{
xtype: 'label',
id: 'idOpen',
maxWidth: Traccar.Style.formFieldWidth,
reference: 'deviceField',
text: 'Please select one device ',
cls: 'statistic-panel-title-style'
}, {
items: [{
fieldLabel: Strings.reportPeriod,
reference: 'periodField',
xtype: 'combobox',
store: 'ReportPeriods',
disabled: true,
collapseOnSelect: true,
editable: false,
valueField: 'key',
displayField: 'name',
queryMode: 'local',
value: 'today',
listeners: {
change: 'onPeriodChange'
}
}]
}, {
items: [{
xtype: 'fieldcontainer',
layout: 'vbox',
reference: 'fromContainer',
hidden: true,
fieldLabel: Strings.reportFrom,
items: [{
xtype: 'datefield',
reference: 'fromDateField',
startDay: Traccar.Style.weekStartDay,
format: Traccar.Style.dateFormat,
value: new Date()
}, {
xtype: 'customTimeField',
reference: 'fromTimeField',
value: (new Date(new Date().setHours(0, 0, 0, 0)))
}]
}]
}, {
items: [{
xtype: 'fieldcontainer',
layout: 'vbox',
reference: 'toContainer',
hidden: true,
fieldLabel: Strings.reportTo,
items: [{
xtype: 'datefield',
reference: 'toDateField',
startDay: Traccar.Style.weekStartDay,
format: Traccar.Style.dateFormat,
value: (new Date(new Date().setDate(new Date().getDate() + 1)))
}, {
xtype: 'customTimeField',
reference: 'toTimeField',
value: (new Date(new Date().setHours(0, 0, 0, 0)))
}]
}]
}, {
items: [{
xtype: 'button',
reference: 'clearButton',
disabled: true,
text: Strings.clearAllSelections,
tooltipType: 'title',
minWidth: 0,
handler: 'onClearSeletcions'
}]
}, {
items: [{
xtype: 'button',
disabled: true,
reference: 'showButton',
text: Strings.reportShow,
tooltip: Strings.reportShow,
tooltipType: 'title',
minWidth: 0,
handler: 'onShowClick'
}]
}],
});
You can use layout hbox and vbox combinations with some margin on first container.
I skipped 2 hidden views ( don't know where they should be found ).
Ext.define('Traccar.view.chart.Chart', {
extend: 'Ext.panel.Panel',
xtype: 'chartView',
requires: [
'Traccar.view.chart.ChartController'
],
layout: 'vbox',
controller: 'chart',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
},
tbar: {
componentCls: 'toolbar-header-style',
defaults: {
xtype: 'button',
disabled: true,
tooltipType: 'title'
},
items: [{
xtype: 'tbtext',
html: 'Statistics',
baseCls: 'x-panel-header-title-default'
}, {
xtype: 'tbfill',
disabled: false
}, {
handler: 'showMap',
reference: 'showMapButton',
glyph: 'xf279#FontAwesome',
stateful: false,
enableToggle: false,
disabled: false,
tooltip: Strings.centerlisttomap
}]
},
items: [{
margin: "20 0 20 0",
xtype: 'label',
id: 'idOpen',
maxWidth: Traccar.Style.formFieldWidth,
reference: 'deviceField',
text: 'Please select one device ',
cls: 'statistic-panel-title-style'
}, {
margin: "20 0 20 0",
xtype: 'container',
layout: 'hbox',
items: [{
fieldLabel: Strings.reportPeriod,
reference: 'periodField',
xtype: 'combobox',
store: 'ReportPeriods',
disabled: true,
collapseOnSelect: true,
editable: false,
valueField: 'key',
displayField: 'name',
queryMode: 'local',
value: 'today',
listeners: {
change: 'onPeriodChange'
}
}, {
xtype: 'button',
reference: 'clearButton',
disabled: true,
text: Strings.clearAllSelections,
tooltipType: 'title',
minWidth: 0,
handler: 'onClearSeletcions'
}, {
xtype: 'button',
disabled: true,
reference: 'showButton',
text: Strings.reportShow,
tooltip: Strings.reportShow,
tooltipType: 'title',
minWidth: 0,
handler: 'onShowClick'
}]
}],
});
In Sencha touch 2 MVC how to insert time picker in 24 hr format??
. I want it in a form but unable to implement.
`var entryForm = Ext.define("TimeSheet.view.Newentry", {
extend: "Ext.TabPanel",
requires: ["Ext.XTemplate", "Ext.field.DatePicker", "Ext.field.Select", "Ext.TitleBar", "Ext.DateExtras"],
xtype:'newentryview',
config: {
//id: 'newEntry',
autodestroy: true,
fullscreen: true,
scrollable: true,
cardSwitchAnimation: 'cube',
tabBar: {
docked: 'top',
layout: {
pack: 'center'
}
},
defaults: {
styleHtmlContent: true
},
items: [{
xtype: 'formpanel',
name: 'entryForm',
//id: 'entry',
style: 'border: none; font: 22px Arial black',
title: 'Add Entry',
fullscreen: true,
iconMask: true,
iconCls: 'info',
items: [{
xtype: 'fieldset',
name: 'fieldSet',
autoComplete: true,
scrollable: false,
cls: 'add',
items: [{
xtype: 'textfield',
name: 'client',
placeHolder: 'Client name'
},{
xtype: 'selectfield',
name: 'project',
placeHolder: 'Project',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},{
xtype: 'textfield',
name: 'task',
placeHolder: 'Task'
},{
xtype: 'datepickerfield',
name: 'date',
value: new Date()
},{
xtype: 'datepickerfield',
name: 'time',
value: new Date(),
//HERE I WANT THE TIME PICKER FIELD IN 24 HR FORMAT..
},{
xtype: 'textareafield',
name: 'notes',
ui: 'textarea',
maxRows: 5,
maxWidth: '100%',
placeHolder: 'Add notes here...'
},{
xtype: 'panel',
name: 'btnpanel',
height: '51px',
width: '100%',
layout: {
type: 'hbox'
},
items: [{
xtype: 'button',
cls: 'btnreset',
text: 'Reset',
style: 'font-size: 14px',
//ui: 'confirm',
height: "35px",
width: '40%',
event: 'tap',
handler: function() {
console.log("reset");
}
},{
xtype: 'spacer'
},{
xtype: 'button',
//id: 'submit',
cls: 'btnsubmit',
text: 'Submit',
style: 'font-size: 14px',
//ui: 'confirm',
height: "35px",
width: '40%',
//go3: 'submitview'
event: 'tap',
handler: function() {
console.log("Submitted");
}
}]
}]
}]
},{
xtype: 'panel',
style: 'border: none; font: 22px Arial black',
title: 'Panel 2',
fullscreen: true,
html: 'Page 2',
}]
}
});`
May be this can help you.
G --- 24-hour format of an hour without leading zeros --- 0 to 23
Refer Ext.Date
Trying to have a button push to a different view 'new profile' and 'profile page' (second view) Of course I would have authentication, however just trying to get the views correct before implement the controllers and server side.
Having the following errors:
Uncaught ReferenceError: view is not defined Main.js:116
Uncaught ReferenceError: view is not defined Main.js:126
Google only brings back "ext is not defined" responses.
Forgive the shocking coding as this is my first app for my school assignment (please give feedback how to improve this if possible) I understand that the view needs to be defined, however in the Sencha Touch's API is where I got the information.
Thanks for your time.
var pageFilterGame = {
xtype: 'panel',
title: 'Filter Games',
items: [
{
xtype: 'fieldset',
title: 'Filter games to find the perfect one',
instructions: 'Please fill in atleast one field to start.',
items: [
{
xtype: 'selectfield',
label: 'What enviroment will this game be played in',
options: [
{ text: 'Outside on Grass', value: 'grass' },
{ text: 'Outside on Concrete', value: 'concrete' },
{ text: 'Inside', value: 'inside' }
]
},
{
xtype: 'selectfield',
name: 'equipment',
label: 'What equipment do you have',
options: [{text: 'DB form'}]
},
{
xtype: 'numberfield',
name : 'Player Numbers',
label: 'How many players do you have',
minValue: 2,
maxValue: 50
},
{
xtype: 'numberfield',
name: 'avgname',
label: 'Average age of players',
minValue: 2,
maxValue: 99
},
{
xtype: 'selectfield',
label: 'Sort result by:',
options: [
{ text: 'Highest Rated', value: 'rated' },
{ text: 'Equipment', value: 'equipment' },
{ text: 'Alphabetically', value: 'alpha' }
]
},
],
},
{
xtype: 'button',
ui: 'action',
text: 'Filter Games',
action: '',
maxWidth: '150px'
}
]
};
var pageSearch = {
xtype: 'panel',
title: 'Search',
items: [
{
xtype: 'fieldset',
title: 'Search',
items: [
{
xtype: 'searchfield',
label: 'Search',
name: 'search'
}
]
},
{
xtype: 'button',
ui: 'action',
text: 'Search',
action: '',
maxWidth: '100px'
}
]
};
var pageProfileLogin = {
xtype: 'panel',
title: 'My Profile',
items: [
{
xtype: 'fieldset',
title: 'Please login to access your profile',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
clearIcon: false
}
]
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
text: 'Login',
ui: 'confirm',
handler: function() {
view.push({
title: 'Second View',
padding: 10,
})},
},
{
xtype: 'button',
ui: 'action',
text: 'Create New',
handler: function() {
view.push({
title: 'New Profile',
items: [
{
xtype: 'fieldset',
title: 'Please fill in the form to create your profile',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
clearIcon: false
},
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
],
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
text: 'Login',
ui: 'confirm',
},
]
}
]
});
}
},
]
},
]}
var viewTabConfig = {
xtype: 'tabpanel',
styleHtmlContent: true,
title: 'Get Creative!',
items: [pageFilterGame, pageSearch, pageProfileLogin]
};
var viewDef = {
//
// Another new UI element introduced. This UI element allows one to add multiple panels in a 'stacked' like operation. A
// new panel when pushed into the NavigationView will be displayed along with a back button. When the back button is tapped,
// the visible view is 'popped' and the parent view gets displayed again. See demo in the lecture recording.
//
extend: 'Ext.NavigationView',
id: 'navView',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.field.Password',
'Ext.field.Select',
'Ext.field.Number',
'Ext.field.Search',
'Ext.form.FieldSet',
'Ext.tab.Panel',
'Ext.data.Store',
'Ext.data.reader.Xml'
],
config: {
fullscreen: true,
items: [viewTabConfig]
}
};
Ext.define("a2.view.Main", viewDef);
I had to add extra models and view to the app.js file and it worked fine.
I get this irritating error message in IE, 'Events is empty or not an object'.
This is my Extended window:
windowKandidaatInfo = Ext.extend(Ext.Window, {
id: 'windowKandidaatInfo',
title: 'Kandidaatinfo',
border: true,
bodyStyle: 'padding: 5px;',
layout: 'fit',
width: 800,
height: 600,
pers_id: 0,
modal: true,
viewConfig: {forceFit: true},
constructor: function(pers_id){
this.pers_id = pers_id;
windowKandidaatInfo.superclass.constructor.call(this);
},
activeTab: function(panel, tab){
tab.getForm().load({
url: '/kandidaten/get_kandidaat_info/' + panel.pers_id + '/',
method: 'get'
});
tab.getForm().on({
actioncomplete: function(form, event){
if(event.type == "load"){
//Data loaded
}
}
})
},
spacerCol: {
colspan: 2,
border: true,
width: 1,
height: 25,
align: 'left'
},
combCountry: {
xtype: 'combo',
name:'land',
fieldLabel: 'Land',
store: new Ext.data.JsonStore({
url: '/index/get_countries/',
method: 'get',
root: 'data',
fields: [{name:'id'},{name:'naam'}],
autoLoad: true
}),
displayField: 'naam',
valueField: 'id',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
combGeslacht: {
xtype: 'combo',
name:'geslacht',
fieldLabel: 'Geslacht',
store: new Ext.data.JsonStore({
url: '/index/get_geslacht/',
method: 'get',
root: 'data',
fields: [{name:'naam'}],
autoLoad: true
}),
displayField: 'naam',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
combBurgelijkeStaat: {
xtype: 'combo',
name:'burgelijke_staat',
fieldLabel: 'Burgelijke staat',
store: new Ext.data.JsonStore({
url: '/index/get_burgelijke_staat/',
method: 'get',
root: 'data',
fields: [{name:'naam'}],
autoLoad: true
}),
displayField: 'naam',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
combProfessions: {
xtype: 'combo',
name:'beroep',
fieldLabel: 'Beroep',
store: new Ext.data.JsonStore({
url: '/index/get_beroepen/',
method: 'get',
root: 'data',
fields: [{name:'beroep'}],
autoLoad: true
}),
displayField: 'beroep',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
initComponent: function(){
Ext.apply(this, {
items: new Ext.TabPanel({
id: 'tabGeneral',
pers_id: this.pers_id,
activeTab: 0,
items: [
{
title: 'Algemene info',
layout: 'table',
xtype: 'form',
frame: true,
bodyStyle: 'padding: 5px;',
viewConfig: {columns: 2, forceFit: true},
items: [
{
column: .5,
width: 400,
layout: 'form',
items: [
{
layout: 'table',
columns: 2,
items: [
{
layout: 'form',
style: 'margin-right: 5px;',
items: [
{ xtype: 'textfield', width: 40, name: 'voorletters', fieldLabel: 'Voorl/ voornaam'},
]
},
{
layout: 'form',
items: [
{ xtype: 'textfield', width: 200, name: 'voornaam', hideLabel: true}
]
}
]
},
{ xtype: 'textfield', name: 'achternaam', fieldLabel: 'Achternaam'},
{ xtype: 'textfield', name: 'adres', fieldLabel: 'Adres'},
{
layout: 'table',
columns: 2,
items: [
{
layout: 'form',
style: 'margin-right: 5px;',
items:[
{xtype:'textfield', width: 60, name:'postcode', fieldLabel:'Postcode/ plaats'}
]
},
{
layout: 'form',
items: [
{xtype:'textfield', width: 200, name:'plaats', hideLabel: true}
]
}
]
},
this.combCountry,
this.spacerCol,
{ xtype: 'textfield', value: '1900-01-01', format: 'Y-m-d', name: 'geb_datum', fieldLabel: 'Geb. datum'},
{ xtype: 'textfield', name: 'bsn_nummer', fieldLabel: 'Bsn nummer'},
this.combProfessions,
this.spacerCol,
{ xtype: 'textfield', name: 'bedrijfsnaam', fieldLabel: 'Bedrijfsnaam'},
{ xtype: 'textfield', name: 'kvk_naam', fieldLabel: 'KvK naam'},
{ xtype: 'textfield', name: 'kvk_land', fieldLabel: 'KvK land'}
]
},
{
column: .5,
width: 400,
layout: 'form',
items: [
{ xtype: 'textfield', name: 'telefoon', fieldLabel: 'Telefoon'},
{ xtype: 'textfield', name: 'mobiel', fieldLabel: 'Mobiel'},
{ xtype: 'textfield', name: 'fax', fieldLabel: 'Fax'},
{ xtype: 'textfield', width: 200, name: 'email', fieldLabel: 'E-mail'},
{ xtype: 'textfield', width: 200, name: 'website', fieldLabel: 'Website'},
this.spacerCol,
{ xtype: 'textfield', name: 'geb_plaats', fieldLabel: 'Geb. plaats'},
this.combBurgelijkeStaat,
this.combGeslacht,
this.spacerCol,
{ xtype: 'textfield', name: 'btw_nummer', fieldLabel: 'BTW nummer'},
{ xtype: 'textfield', name: 'kvk_plaats', fieldLabel: 'KvK plaats'},
{ xtype: 'textfield', name: 'kvk_nummer', fieldLabel: 'KvK nummer'}
]
}
]
},
{
title: 'Adres info',
xtype: 'form',
layout: 'form',
bodyStyle: 'padding: 5px;'
},
{
title: 'Contact info',
xtype: 'form',
layout: 'form',
bodyStyle: 'padding: 5px;'
}
],
listeners: {
tabchange: this.activeTab
}
})
});
windowKandidaatInfo.superclass.initComponent.call(this);
},
show: function(){
windowKandidaatInfo.superclass.show.apply(this, arguments);
}
});
this is how i call it in a simple JS function:
function showWindow(){
var win = new windowKandidaatInfo(id);
if(win){
win.show();
}}
Why o why is it showing in FF but not in IE?
You have an extra comma on this line.
{ xtype: 'textfield', width: 40, name: 'voorletters', fieldLabel: 'Voorl/ voornaam'},
Firefox is very forgiving with JS syntax where IE isn't. Most of your issues will also probably be due to extra commas. To combat this, I do commas at the beginning of new lines instead of at the end.
So it would be like this.
windowKandidaatInfo = Ext.extend(Ext.Window, {
id: 'windowKandidaatInfo'
,title: 'Kandidaatinfo'
,border: true
,bodyStyle: 'padding: 5px;'
,layout: 'fit'
Try cleaning up your code a bit, there are a few missing semicolons (http://www.jslint.com/).
I worked with extjs some time ago, and had the same problem with a window rendering in Firefox and not in IE. Maybe IE's JS engine is more sensitive to syntactical errors.