I'm still trying to work through this tutorial, but with mixed success. In my controller script, I have the following:
config: {
refs: {
notesListContainer: 'noteslistcontainer',
noteEditor: 'noteeditor'
},
control: {
notesListContainer: {
newNoteCommand: 'onNewNoteCommand',
editNoteCommand: 'onEditNoteCommand'
}
}
},
onEditNoteCommand: function(list, record) {
console.log('onEditNoteCommand');
this.activateNoteEditor(record);
},
activateNoteEditor: function(record) {
var noteEditor = this.getNoteEditor();
noteEditor.setRecord(record);
Ext.Viewport.animateActiveItem(noteEditor, this.slideLeftTransition);
},
When I run this in Chromium 18.0.1025.168, I get
Uncaught TypeError: Cannot call method 'setRecord' of undefined Notes.js:37`.
`this.getNoteEditor()'
does not return the noteEditor, but returns undefined.
The entire project's source is available here.
The important thing is to specify the ref as autoCreated using autoCreate : true
config: {
refs: {
notesListContainer: 'noteslistcontainer',
noteEditor: {
selector: 'noteeditor',
xtype: 'noteeditor',
autoCreate: true // missing
}
},
},
...
}
Related
I have filter on my component
filters: {
formatStatus (value) {
let status = {
active: {
text: this.$t('general.successful'),
class: 'secondary--text'
},
processing: {
text: this.$t('general.processing'),
class: 'tertiary--text'
},
waiting: {
text: this.$t('general.pending'),
class: 'tertiary--text'
}
}
return status[value]
}
}
but i got an error
TypeError: Cannot read property '$t' of undefined
but on methods,
$t is working fine.
Rearraing your code like this. it will work
filters: {
formatStatus (value,self) {
let status = {
active: {
text: self.$t('general.successful'),
class: 'secondary--text'
},
processing: {
text: self.$t('general.processing'),
class: 'tertiary--text'
},
waiting: {
text: self.$t('general.pending'),
class: 'tertiary--text'
}
}
return status[value]
}
}
call filter like :
{{yourvalue | formatStatus(this)}}
This code is working:
Ext.application({
name: 'WebClient',
autoCreateViewport: true,
launch: function() {
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Некорректный IP Адресс',
IPAddressMask: /[\d\.]/i
});
Ext.apply(Ext.form.field.VTypes, {
port: function(v) {
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
if (!isNumber(v)) return false;
return (v>=0 && v<=65535)
},
portText: 'Порт 2 байта 0..65535',
portMask: /[\d\.]/i
});
},
models: ['Request','RPCLog','Connection']
});
But if I comment line autoCreateViewport: true, or set this property to false, the browser produces an error: Uncaught TypeError: Cannot read property 'field' of undefined. How to make Ext.form.field.VTypes available without autoCreateViewport:true?
I had the same issue, except that I was defining the custom VType in the view.
Defining the VType inside the initComponent helped resolve the issue.
initComponent : function(){
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
I am trying to change value of variable and i did as instruction in this post but value does not changes.
My codes are as follow:
Ext.define('MyApp.view.OnlineOffline', {
extend: 'Ext.Panel',
alias: "widget.onlineoffline",
config: {
onlineStatus: 0,
items: [
{
xtype: 'container',
layout: 'hbox',
cls: 'offline-wrap',
items:[
{
xtype: 'image',
cls: 'offlineCheck',
id:'onlineButton',
width: 85,
height:20,
listeners: {
tap: function (button)
{
var me = button.up('onlineoffline')
if (!Ext.device.Connection.isOnline())
{
Ext.Msg.alert('Please connect to <br/>working internet Connection?');
this.element.removeCls('onlineCheck');
this.element.addCls('offlineCheck');
me.setonlineStatus(1);
}
else {
if(me.getOnlineStatus())
{
console.log( 'connection yes if' + me.getOnlineStatus());
me.setOnlineStatus(1);
this.element.removeCls('onlineCheck');
this.element.addCls('offlineCheck');
}
else{
this.element.removeCls('offlineCheck');
this.element.addCls('onlineCheck');
me.setOnlineStatus(0);
console.log( 'connection yes else' + me.getOnlineStatus());
}
}
}
}
},
]
}]
}
});
A couple things here...
First, you are initializing me as a global variable, which is a bad idea. Rather than doing this, get a reference to what you have as me using the button:
listeners: {
tap: function (button) {
var me = button.up('onlineoffline')
...
The problem you are having is caused because you're calling the wrong function. Your config parameter is defined as onlineStatus, but you are calling setonlinestatus(). Call me.setOnlineStatus() instead. The camel-casing for the generated getters and setters will be done exactly as your config param, except the first letter will be capitalized.
ExtJS4: I am having problems while upgrading my application ExtJs version from 3.4.0 to 4.1.1a.
My 3.4.0 version code:
this.jsonStore = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
url: 'rs/environments',
disableCaching: true
}),
restful : true,
storeId : 'Environments',
idProperty: 'env',
fields : [
'ConnectionName', 'Type'
]
});
this.colmodel = new Ext.grid.ColumnModel({
defaults: {
align: 'center'
},
columns: [{
header: Accero.Locale.text.adminlogin.connectionsHeading,
width : 140,
dataIndex: 'ConnectionName'
},
{
header: Accero.Locale.text.adminlogin.connectionTypeHeader,
width : 120,
dataIndex: 'Type'
}]
});
config = Ext.apply({
enableHdMenu: false,
border : true,
stripeRows : true,
store : this.jsonStore,
view : new Ext.grid.GridView(),
header : false,
colModel : this.colmodel,
sm : new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: {
msg: Accero.Locale.text.adminlogin.loadingmask
}
}, config);
I made below changes to make application work with ExtJs4.1.1:
var sm = new Ext.selection.CheckboxModel( {
listeners:{
selectionchange: function(selectionModel, selected, options){
// Must refresh the view after every selection
myGrid.getView().refresh();
// other code for this listener
}
}
});
var getSelectedSumFn = function(column){
return function(){
var records = myGrid.getSelectionModel().getSelection(),
result = 0;
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
}
var config = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: this.jsonStore,
defaults: { // defaults are applied to items, not the container
sortable:true
},
selModel: sm,
columns: [
{header: Accero.Locale.text.adminlogin.connectionsHeading, width: 140, dataIndex: 'ConnectionName'},
{header: Accero.Locale.text.adminlogin.connectionTypeHeader, width: 120, dataIndex: 'Type'}
],
loadMask: {
msg: Accero.Locale.text.adminlogin.loadingmask
},
viewConfig: {
stripeRows: true
}
}, config);
With these changes, I am getting the error at my local file 'ext-override.js' saying 'this.el is not defined'.
I debug the code and found that, in the current object this, there is no el object.
ext-override.js code:
(function() {
var originalInitValue = Ext.form.TextField.prototype.initValue;
Ext.override(Ext.form.TextField, {
initValue: function() {
originalInitValue.apply( this, arguments );
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
}
);
})();
Kindly suggest where am I going wrong?
Thanks in advance...
Seriously, use more lazy initialization! Your code is a hell of objects, all unstructured.
First of all, you can override and use the overridden method more easily with something like that (since 4.1)
Ext.override('My.Override.for.TextField', {
override : 'Ext.form.TextField',
initValue: function() {
this.callOverridden(arguments);
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
});
But: The method initValue is called in initField (and this in initComponent) so that you cannot have a reference to this.me because the component is actually not (fully) rendered.
So, this should help (not tested):
Ext.override('My.Override.for.TextField', {
override : 'Ext.form.TextField',
afterRender: function() {
this.callOverridden(arguments);
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
});
But I'm strongly recommend not to use such things within overrides. Make dedicated components which will improve code readibility.
I need a real <img> HTML tag in my view Sencha.
I've retrieved this code from the official doc :
Ext.define('Ext.ux.Image', {
extend: 'Ext.Component', // subclass Ext.Component
alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'
autoEl: {
tag: 'img',
src: Ext.BLANK_IMAGE_URL,
cls: 'my-managed-image'
},
// Add custom processing to the onRender phase.
// Add a ‘load’ listener to the element.
onRender: function() {
this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
this.callParent(arguments);
this.el.on('load', this.onLoad, this);
},
onLoad: function() {
this.fireEvent('load', this);
},
setSrc: function(src) {
if (this.rendered) {
this.el.dom.src = src;
} else {
this.src = src;
}
},
getSrc: function(src) {
return this.el.dom.src || this.src;
}
});
When i try to do setSrc, I get this error : Cannot read property 'dom' of undefined
Your code is from Ext.Js 4.x docs. You should use sencha touch 2 docs.
Please compare:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component
and
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component
They are different.
As i understand you need real < img > tag in your view. If you use Ext.Img it will create a div container with background-image.
I know two ways:
set up tpl and data property.
Ext.create('Ext.Component', {
config: {
tpl: '',
data: {
url: 'http://example.com/pics/1.png',
imgClass: 'my-class'
}
}
});
set html config.
Ext.create('Ext.Component', {
config: {
html: ' <img class="my-class" src="http://example.com/pics/1.png">'
}
});