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);
}
}
}],
}]
});
Basically, the problem that I have is the following:
When I resize the column in my GridPanel the textbox UI near Name get destroyed: the line on the right disappear. It should instead resize according to the width. How could I fix it?
This is my code:
...
columns: {
defaults: {
flex: 1,
},
layout:'auto',
items: [{
text: Strings.sharedName,
flex: 1,
minWidth: Traccar.Style.columnWidthNormal,
dataIndex: 'name',
//style: 'text-align:right;!important',
filter: 'string',
defaults: {
margin: '-28 30 -5 50'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'right'
},
flex: 2,
items: [{
xtype: 'textfield',
id: 'nameFilter',
listeners: {
change: function(field, value) {
filterGrid('name', value);
}
}
}]
}]
}
...
Here a reproducible example:
https://fiddle.sencha.com/#view/editor&fiddle/3a41
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'
}]
}],
});
I need some help. When creating dashboard I know that it need to fill parts object
parts: {
portlet: {
viewTemplate: {
layout: 'fit',
html: 'messafe from portlet'
}
},
portlet2: {
viewTemplate: {
layout: 'fit',
html: 'message from portlet2'
}
}
}
also I know that I can use them below to render parts
defaultContent: [{
type: 'portlet',
title: 'Test1',
columnIndex: 0,
height: 500
}, {
type: 'portlet2',
title: 'Test2',
columnIndex: 1,
height: 300
}, {
type: 'portlet',
title: 'Test3',
columnIndex: 1,
height: 300
}, {
type: 'portlet',
title: 'Test4',
columnIndex: 2,
height: 350
}, {
type: 'portlet',
title: 'Test5',
columnIndex: 3,
height: 350
}]
now my question is now add(do all this job) programmatically? for example I want to create new component on button click
I'm trying to create a Sencha Touch 2 form panel for a model in which one of the fields contains the URL to an image file. If I include a textfield, it'll display the text of the URL correctly, but what I really want is to display the image found at that URL, and I'm not sure how to do that. If I use xtype: image, I think I need a src config, and I'm not sure how to specify that the desired value is in one of the form fields. My view looks like this:
Ext.define("CatalogApp.view.ItemDetailView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.itemdetailview",
config:{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var backButton = {
xtype: "button",
ui: "back",
text: "Home",
handler: this.onBackButtonTap,
scope: this
};
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Item Detail",
items: [
backButton
]
};
var mainLayout = {
xtype: "container",
layout: 'hbox',
items: [
{
xtype: 'textfield',
width: 200,
name: 'thumbUrl'
},
{
xtype: "fieldset",
flex: 1,
items : [
{
xtype: 'textfield',
name: 'itemNbr',
label: 'Item Nbr',
disabled: true
},
{
xtype: 'textfield',
name: 'itemDesc',
label: 'Item Desc',
disabled: true
}
]
}
]
};
this.add([
topToolbar,
mainLayout
]);
},
onBackButtonTap: function ()
{
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
How can I set up this view to display the image correctly?
You have to define new Sencha component: ImageField
Ext.define('Ext.ux.field.ImageField', {
extend: 'Ext.field.Field',
requires: [
'Ext.Img'
],
xtype: 'imagefield',
config: {
component: {
xtype: 'image'
}
},
updateValue: function(value, oldValue) {
var me = this,
component = me.getComponent();
component.setSrc(value);
},
proxyConfig: {
width: '100%',
height: '100%'
}
});
Than in form:
Ext.define("CatalogApp.view.ItemDetailView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.itemdetailview",
config:{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var backButton = {
xtype: "button",
ui: "back",
text: "Home",
handler: this.onBackButtonTap,
scope: this
};
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Item Detail",
items: [
backButton
]
};
var mainLayout = {
xtype: "container",
layout: 'hbox',
items: [
{
xtype: 'imagefield', // only this change
width: 200,
height: 150,
name: 'thumbUrl'
},
{
xtype: "fieldset",
flex: 1,
items : [
{
xtype: 'textfield',
name: 'itemNbr',
label: 'Item Nbr',
disabled: true
},
{
xtype: 'textfield',
name: 'itemDesc',
label: 'Item Desc',
disabled: true
}
]
}
]
};
this.add([
topToolbar,
mainLayout
]);
},
onBackButtonTap: function ()
{
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
Cheers, Oleg