i'm trying to get the color of one button to change whenever i click on a different button. My non working code is below. I've had trouble finding the right documentation for this
components: [
{flex: 1,
kind: "Control",
layoutKind: "HFlexLayout",
components: [
{kind: "Button", caption: "X", onclick: "buttonClick", style: Xcolor},
{name: "lIqI", kind: "Button", caption: "I", disabled: true, style: OFF},
{kind: "Button", caption: "II", disabled: true, style: OFF},
{kind: "Button", caption: "III", disabled: true, style: OFF},
{kind: "Button", caption: "IV", disabled: true, style: OFF},
{kind: "Button", caption: "V", disabled: true, style: OFF}
],
buttonClick: function(inSender, inEvent) {
lIqI.setStyle(ON);
}
// ON & OFF are colors
If you want to refer to your button you need to use the following syntax:
this.$.lIqI.setStyle(ON);
Related
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'
}]
}],
});
After I render tree view I want to execute some code. But only after render is complete. It seems like AUI renders nodes of tree asynchronously. Is there an event or param to run a function after render()?
This makes me think that TreeView is being drawn async.
var render = new Y.TreeView(
{
boundingBox: '#fruits',
children: [
{
children: [
{label: 'Watermelon', leaf: true},
{label: 'Apricot', leaf: true},
{
children: [
{label: 'Watermelon', leaf: true},
{label: 'Apricot', leaf: true},
{
children: [
{label: 'Watermelon', leaf: true},
{label: 'Apricot', leaf: true},
{label: 'Pomegranate', leaf: true}
],
expanded: true,
label: 'second branch',
type: 'task'
}
],
expanded: true,
label: 'second branch'
}
],
expanded: true,
label: 'first branch'
},
{
children: [
{label: 'Watermelon', leaf: true},
{label: 'Apricot', leaf: true}
],
expanded: true,
label: 'second branch'
}
]
}
).render();
var lis = Y.all('.tree-node');
console.log(lis); // 2 items here
setTimeout(function(){
var lis = Y.all('.tree-node');
console.log(lis);// 28 here
}, 1000);
There is an event for this called "render"
new Y.TreeView({
boundingBox: '#fruits',
children: [...],
on: {
render: function(){/*Your code here*/}
}
}).render();
I would like to add some button-like images (which when clicked will manipulate the data below) called update, delete and add column to the top right of the top toolbar. Again these would be images that would call forth events onclick.
Is this the best way to do that?
Would this be done via templates? Not quite sure I understand those yet. Are there other dependencies with templates?
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
//toolbar: [
//{"name": "create"},
// {"name": "save"},
// {"name": "cancel"}
// ],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});
You might use toolbar.template and do something as:
$("#grid").kendoGrid({
columns : [
{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }
],
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
dataSource: {
data : people,
pageSize: 2
},
editable : true,
scrollable: true,
pageable : true,
sortable : true
});
The class values are important since this is what Kendo UI uses for binding the standard handlers to this image click event.
In addition pageSize needs to be define inside the dataSource.
For aligning the icons to the right you should define the following style:
#grid .k-toolbar {
text-align: right;
}
Where #grid is the id of your grid.
See a running example here: http://jsfiddle.net/OnaBai/Y9vhE/ The only question is that since the images are not loaded you will see it as missing images but they are still fully functional.
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
enyo.kind({
name: "TestDialog",
kind: enyo.VFlexBox,
components: [
{kind: "ApplicationEvents", onLoad: "openDialog"},
{kind: "ModalDialog", name: "errorDialog", caption: "Error!", components: [
{kind: "HFlexBox", layoutKind: "HFlexLayout", pack: "center", components: [
{content: "Oh no!", name: "errorMessage", style: "margin: 20px 0px;", className: "enyo-text-error warning-icon"}
]},
{kind: "Button", caption: "OK", onclick: "closeErrorDialog"}
]}
],
openDialog: function() {
this.$.errorMessage.setContent("This is a sample error message");
this.$.errorDialog.openAtCenter();
}});
I can't figure out how to set the content of this.$.errorMessage.
If I comment out the line that attempts to set the content of this.$.errorMessage, the dialog displays correctly with the original content.
What am I doing wrong?
Note: alert(this.$.errorDialog) displays enyo.ModalDialog as expected, but
alert(this.$.errorMessage) displays undefined. This is true for all the other components of this.$.errorMessage as well.
Actually, I edited my answer:
That control won't exist while the dialog is closed unless you specify lazy: false for the ModalDialog. Or you can do the .setContent() after the .openAtCenter()