Change Button-Text (selectfield) - Sencha Touch - button

how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]

one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});

You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}

Related

Grid column center align not applying for rowediting

I'm working Extjs 4.2. I have grid with rowediting plugin. Problem is when starting edit row, columns with align:center not showing correctly, but align:right works correct on editor row. I searched problem, but didn't find solve. Please Help with this.
This is my editor:
buildPlugins: function () {
var rowEditing = Ext.create("Ext.grid.plugin.RowEditing",{
autoCancel: false,
pluginId: 'rowedit',
errorSummary: false
});
return [rowEditing];
},
This is last three column code
{
text: Message.cameralGrid.columns.menu5,
menuDisabled: true,
columns: [
{
text: Message.cameralGrid.columns.cameralMustHoldDate,
dataIndex: "cameralMustHoldDate",
width: 120,
sortable: false,
xtype: "datecolumn",
style: "text-align:left;",
align: "center"
},
{
text: Message.cameralGrid.columns.cameralHoldDate,
dataIndex: "cameralHoldDate",
width: 100,
sortable: false,
xtype: "datecolumn",
style: "text-align:left;",
align: "center",
editor: {
xtype: "datefield",
format: "d.m.Y",
allowBlank: false
}
},
{
text: Message.cameralGrid.columns.fineSum,
dataIndex: "fineSum",
width: 120,
sortable: false,
xtype: "numbercolumn",
style: "text-align:left;",
align: "right",
editor: {
xtype: "numberfield",
minValue: 0,
allowBlank: false
}
}
]
}
Thanks for Help!
I needed to override Ext.grid.RowEditor class. After this problem is solved.
Ext.define('helper.RowEditor', {
override: 'Ext.grid.RowEditor',
requires: [
'Ext.grid.RowEditor'
],
addFieldsForColumn: function(column, initial) {
var me = this,
i,
length, field;
if (Ext.isArray(column)) {
for (i = 0, length = column.length; i < length; i++) {
me.addFieldsForColumn(column[i], initial);
}
return;
}
if (column.getEditor) {
// Get a default display field if necessary
field = column.getEditor(null, {
xtype: 'displayfield',
// Override Field's implementation so that the default display fields will not return values. This is done because
// the display field will pick up column renderers from the grid.
getModelData: function() {
return null;
}
});
if (column.align === 'right') {
field.fieldStyle = 'text-align:right';
}
// this block is added -------------------------------->
if (column.align === 'center') {
field.fieldStyle = 'text-align:center';
}
// <-----------------------------------------------------
if (column.xtype === 'actioncolumn') {
field.fieldCls += ' ' + Ext.baseCSSPrefix + 'form-action-col-field'
}
if (me.isVisible() && me.context) {
if (field.is('displayfield')) {
me.renderColumnData(field, me.context.record, column);
} else {
field.suspendEvents();
field.setValue(me.context.record.get(column.dataIndex));
field.resumeEvents();
}
}
if (column.hidden) {
me.onColumnHide(column);
} else if (column.rendered && !initial) {
// Setting after initial render
me.onColumnShow(column);
}
}
}
});

When I include the html in config it does not work

I am bit confused here, look at the code below:
var arrReqTplTest=["........................."];
var finalStudent=[];
finalStudent.push({
title: “Student Table”,
collapsed: true,
layout: 'fit',
items: [
{
xtype: 'component',
itemId: 'StudentTablViewID-' + i,
html: arrReqTplTest
},
{
xtype: 'dataview',
itemId: 'StudentTable-' + i,
height: 200,
store: ‘studentDetailStore’,
//itemHeight: 70,
scrollable: false,
itemSelector: 'div.wrap-requirements-' + i
}
]
});
}
view.add(finalStudent);
})
}
});
This works fine but now look at the code below which does not work:
var arrReqTplTest=["........................."];
var finalStudent=[];
finalStudent.push({
title: “Student Table”,
collapsed: true,
layout: 'fit',
items: [
{
xtype: 'component',
itemId: 'StudentTablViewID-' + i,
config:{
html:arrReqTplTest
}
},
{
xtype: 'dataview',
itemId: 'StudentTable-' + i,
height: 200,
store: ‘studentDetailStore’,
//itemHeight: 70,
scrollable: false,
itemSelector: 'div.wrap-requirements-' + i
}
]
});
}
view.add(finalStudent);
})
}
});
its because "html" is part of component's config.
you are doing it right with the first code:
html: thisIsYourVariableWithHtml //you can store the html value inside a variable or directly paste the value as string
But i will suggest to add:
styleHtmlContent: true,
to make sure that component really render the html value as html.
now in your second code you write:
config: {
html: thisIsYourVariableWithHtml
}
you are defining custom config variable (dunno what other people call it, but this is my term when defining a property inside component's config object) in this case a object called config that have value "html" and by default sencha's component will not know what to do with this as it is your custom config variable.

Sencha Touch Custom field

I have this custom field in my form. But when i do the form.getValues() the values for this field is empty. Is this the right way to create custom form fields.
Ext.define("Tasks.view.BarcodeField", {
extend: 'Ext.Container',
alias:'widget.barcodeField',
xtype: 'barcodefield',
config: {
layout: 'hbox',
id: 'barcodeField',
itemId: 'barcodeField',
items: [
{
xtype: 'textfield',
label: 'Barcode',
labelWidth: '37.4%',
flex: 4
},
{
xtype: 'image',
id : 'barcodeScanner',
itemId : 'barcodeScanner',
src: 'resources/images/barcodes.png',
padding: '6 0 0 0',
flex: 1,
listeners: {
tap: function() {
console.log("Starting the barcode Scanner");
function success(result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
}
function fail(error) {
alert("Scanning failed: " + error);
}
cordova.plugins.barcodeScanner.scan(success, fail);
}
}
}
]
},
getValue : function()
{
console.log(this.getItems().getAt(0).getValue());
return this.getItems().getAt(0).getValue();
},
setValue : function(newvalue) {
this.getItems().getAt(0).setValue(newvalue);
}
});
Instead of extending from the Container i extended the Ext.field.Field and added the items as children to that component.
Ext.define("Tasks.view.BarcodeField", {
extend: 'Ext.field.Field',
alias:'widget.barcodeField',
xtype: 'barcodefield',
config: {
layout: 'hbox',
id: 'barcodeField',
itemId: 'barcodeField',
isField:false,
component : {
xtype:'panel',
layout:'hbox',
items: [
{
xtype: 'input',
label: 'Barcode',
labelWidth: '37.4%',
flex: 4,
id:'barcodeTextField',
itemId:'barcodeTextField'
},
{
xtype: 'image',
id : 'barcodeScanner',
itemId : 'barcodeScanner',
src: 'resources/images/barcodes.png',
padding: '6 0 0 0',
flex: 1,
listeners: {
tap: function() {
console.log("Starting the barcode Scanner");
var text = Ext.ComponentQuery.query("#barcodeTextField")[0];
text.setValue("123456");
}
}
}
]
}
},
getValue : function()
{
console.log(this.getComponent().getItems().getAt(0).getValue());
return this.getComponent().getItems().getAt(0).getValue();
},
setValue : function(newvalue) {
this.getComponent().getItems().getAt(0).setValue(newvalue);
}
});
You can easily add a formpanel as the first child wich will contain a textfield inside in.
And afterward do the formpanel.getValues() to get the values from every field inside that formpanel.
and the other thing is you can do
this.getItems()[0].getValue();
this.getItems()[0].setValue('someDesiredValue');
but that being said I will really prefer doing that on the controller class.

Rally Grid load event is not firing

I've been trying to make sure that the load event in the Rally.ui.grid.Grid is firing since I have a problem because my Grid is not filtering. I tried calling the methods myStore.setFilter() and myStore.load(), these two are firing, but I can't be sure the Grid is working properly since the first time, when it all loads, it does the filtering right, but then when I change the dropdown or combobox it doesn't.
This is how I load myStore:
this.myStore=Ext.create("Rally.data.wsapi.Store",{
model:"Task",
autoLoad:true,
filters: myFilters,
listeners:{
load:function(myStore,myData,success){
if(!this.myGrid) //IT CREATES THE GRID FOR THE FIRST TIME
{
this._loadGrid(myStore)
console.log('Grid Created!');
// this.myStore.setFilter();
// this.myStore.load();
}
else
{
this.myStore.setFilter();
//this.myStore.load();
console.log('Grid reloaded!');
console.log(myFilters);
}
},
scope:this
},
fetch:["FormattedID","State","Iteration", "Release"]
}
)
}
And this is how I load myGrid:
_loadGrid:function(myStoryStore){
this.myGrid = Ext.create("Rally.ui.grid.Grid",{
store:myStoryStore,
columnCfgs:["FormattedID","State","Iteration", "Release"],
listeners: {
load: function(myGridy){
console.log('myGrid did load!');
},
scope:this
}
});
this.add(this.myGrid);
}
Here is an example by David Thomas from his videos on building Rally apps that uses reconfigure method to which a store is passed: _myGrid.reconfigure(myStore)
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create('Rally.ui.combobox.ReleaseComboBox',{
listeners:{
ready: function(combobox){
//console.log('loaded release name', combobox.getRecord().get('Name')); //getRecord() returns currently selected item
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
//console.log('what is this', this);
},
select: function(combobox){
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
},
scope: this
}
});
this.add(relComboBox);
},
_loadStories: function(releaseRef){
console.log('loading stories for ', releaseRef);
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'User Story',
autoLoad:true,
fetch: ['Name','ScheduleState','FormattedID'],
filters:[
{
property : 'Release',
operator : '=',
value : releaseRef
}
],
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
this._updateGrid(myStore);
},
scope:this
}
});
},
_createGrid: function(myStore){
console.log("load grid", myStore);
this._myGrid = Ext.create('Ext.grid.Panel', {
title: 'Stories by Release',
store: myStore,
columns: [
{text: 'ID', dataIndex: 'FormattedID', flex: 1},
{text: 'Story Name', dataIndex: 'Name', flex: 2},
{text: 'Schedule State', dataIndex: 'ScheduleState', flex: 2}
],
height: 400
});
this.add(this._myGrid);
},
_updateGrid: function(myStore){
if(this._myGrid === undefined){
this._createGrid(myStore);
}
else{
this._myGrid.reconfigure(myStore);
}
}
});

extjs google maps v3 not working

hello i'm trying to add google maps for my window i'm using mvc i didn't see any example based on mvc here is my code
Ext.define('UserApp.view.uiTypes.GoogleMaps',{
extend: 'Ext.panel.Panel',
width:800,
height:250,
bodyPadding: 5,
title:'Google Maps',
requires: ['Ext.ux.GMapPanel'],
items:[
{
xtype: 'textfield',
label: 'test'
},
{
xtype:'textfield',
label:'hellworld'
},
{
xtype: 'gmappanel',
region: 'center',
id: 'mygooglemap',
zoomLevel: 3,
gmapType: 'map',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
'lat': 37.4419,
'lng': -122.1419,
marker:{ title: 'Palo Alto'}
}
}
],
});
error in console
Uncaught Error: Invalid value for property : function (){var a=this,b;if(a.isVisible()){b=a.el.getAlignToXY(a.container,"c-c");a.setPagePosition(b)}else{a.needsCenter=true}return a}
Since you are already using GMapPanel3....
You can try to do something like this :
var smallGoogleMap = {
xtype: 'gmappanel',
id :'gSmallSiteMap',
width:'100%',
height:200,
zoomLevel:10,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 42.339641,
lng: -71.094224,
marker: {
title: 'Boston Museum of Fine Arts',
listeners: {
click: function(e) {
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
}
}
}
Ext.getCmp('some div or window').add(smallGoogleMap);
OR : You can simply replace the part inside items[] and put the variable smallGoogleMap.
Let me know if this doesn't work!

Resources