Why does this Ext.grid.Panel crash? - extjs4

This crashes:
var grdMakes = Ext.extend(Ext.grid.Panel, {
constructor: function(paConfig) {
}
}
This does not:
var grdMakes = Ext.extend(Ext.grid.Panel, {
}
The crash is:
Uncaught TypeError: Cannot read property 'added' of undefined
Why does adding a constructor cause it to crash? I can do it with other objects like:
var pnlMakesMaint = Ext.extend(Ext.Panel, {
constructor: function(paConfig) {
}
} // just fine
EDIT
To clarify what I want to do is that I want to be able to instantiate an object with the option to override the defaults.
var g = new grdMakes({}); // defaults used
var g = new grdMakes({renderTo: Ext.getBody()}); // renderTo overridden
This is working for everything except the Ext.grid.Panel
Also, I'm using ExtJS 4
SOLUTION
Turns out, extend is deprecated in ExtJS 4. So I used this and it works:
Ext.define('grdMakes', {
extend: 'Ext.grid.Panel',
constructor: function(paConfig) {
var paConfig = Ext.apply(paConfig || {}, {
columns: !paConfig.columns ? [{
header: 'Makes',
dataIndex: 'make'
}, {
header: 'Description',
dataIndex: 'description'
}]: paConfig.columns,
height: !paConfig.height ? 400 : paConfig.height,
renderTo: !paConfig.renderTo ? Ext.getBody() : paConfig.renderTo,
store: !paConfig.store ? stoMakes : paConfig.store,
title: !paConfig.title ? 'Makes' : paConfig.title,
width: !paConfig.width ? 600 : paConfig.width
});
grdMakes.superclass.constructor.call(this, paConfig);
}
}

Ok.But your code seems like ExtJS3.Because Ext.extend is depreceated in ExtJS4 version.Instead of extend you can use define.For reference you can check the following url:
http://docs.sencha.com/ext-js/4-0/#/api/Ext-method-extend
Afaik,for overriding default options,this is not the perfect way.You need to use Ext.override.
For example:
Ext.override(Ext.grid.Panel,{
lockable : true
});
Like above you have to override the default options.

Related

sencha touch getView()?

How can I call getView(view_name)` in Sencha touch? I usually do this on extjs but I can't in sencha touch. I could not understand the application concept.
run_edit: function(data) {
$this = this;
this.mode = "update";
this.data = data;
this.win = this.getView('Group_prop').create();
var form = this.win.down('form');
var util = this.getController('controller_Helper');
form.getForm().loadRecord(data);
util.form_lock({
form:form,
items:['GROUP_KODE']
});
util.form_require({
form:form,
items:['GROUP_KODE','GROUP_NAMA']
});
this.win.show();
},
I see you are trying to create a view and set it to window, in sencha touch you can do it like this:
Ext.Viewport.add(Ext.create('MyApp.view.ViewName'));
instead of Viewport you can take any other container and set newly created view to it
Ext.getCmp('myContainerId').add(Ext.create('MyApp.view.ViewName'));
to fetch this view later, you have to specify id config in view and then get it like this:
var view = Ext.getCmp('ViewId');
Ok so it seems like you are trying to get the view: Group_prop. Make sure this view has an id or preferably an itemId set in its config. e.g
Ext.define('MyApp.view.GroupProb', {
extend: 'Ext.Panel',
alias: 'widget.group_prob',
config: {
...
itemId: 'groupProb',
...
},
....
});
Now in your controller you need to create a reference for this view to access it properly. So your controller would look something like this:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs : {
groupProb : {
autoCreate: true,
selector: '#groupProb',
xtype: 'group_prob'
}
},
control: {
...
},
...
},
run_edit: function(data) {
$this = this;
this.mode = "update";
this.data = data;
this.win = this.getView('Group_prop').create();
var form = this.win.down('form');
var util = this.getController('controller_Helper');
form.getForm().loadRecord(data);
util.form_lock({
form:form,
items:['GROUP_KODE']
});
this.win.show();
},
...
});
Now from your run_edit function, its seems like you are working with windows from the this.win variable (correct me if I'm wrong). Well in Sencha Touch, you work with Panels. Also at the end of this function you call the show function on this.win, which suggests that you want to execute run_edit when the this.win is shown. That being said, you may want to your run_edit function to look something like this:
run_edit: function() {
var me = this,
mode = 'update',
data = data,
groupProbPanel = me.getGroupProb();
// This assumes that your form component has an itemId.
// You need one inorder use the down method.
var form = groupProbPanel.down('#form_itemId');
// You may want to double check this. I don't think that is how you
// you get the controller.
var util = this.getController('controller_Helper');
form.getForm().loadRecord(data);
util.form_lock({
form:form,
items:['GROUP_KODE']
});
}
Since we want this to happen when groupProbPanel is shown we need to set a show event listener in our control config. So your controller's config should look like this:
...,
config: {
refs : {
groupProb : {
autoCreate: true,
selector: '#groupProb',
xtype: 'group_prob'
}
},
control: {
groupProb : {
show: 'run_edit'
},
...
},
...
},
...
Two ways is there to call the Views
1.
Ext.Viewport.setActiveItem({xtype:'TwowayMakePayment'}); // view xtype
2.
var getti=Ext.create('VUCFyn.view.AfterLogin'); //create object 4 d view
Ext.Viewport.add(getti); // next add the object
Ext.Viewport.setActiveItem(getti); // final Active that obj

ExtJs3.4.0 to ExtJs4.1.1 upgrade issues

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.

Using ref getter function returns undefined

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
}
},
},
...
}

Ext.ux.Image : Cannot read property 'dom' of undefined

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">'
}
});

How to save the notes in local storage in sencha touch?

I have followed the tutorial : http://miamicoder.com/2011/writing-a-sencha-touch-application-part-3/
to add and save notes. But save note is not working for me. What is the issue??
My code to save :
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
// TODO: Save current note.
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
// Update the note with the values in the form fields.
noteEditor.updateRecord(currentNote);
//var errors = currentNote.validate();
/*if (!errors.isValid()) {
currentNote.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}*/
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('id', currentNote.data.id) === null) {
alert('fjghjkh');
notesStore.add(currentNote);
} else {
alert('fjghjkh');
currentNote.setDirty();
}
notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
thanks
Sneha
I had the same problem. In my case, the solutaion was to add the config 'autoLoad: true' to my defined store.
Perhaps this answer helps other, who find this question by googling a similar problem.
Regards,
Andreas