I have an association set up between my CostCenter and my Site Model.
My problem is that the association is not loaded in time when I try to display the Site in the CostCenterGrid.
items: [
{
xtype: 'gridpanel',
itemId: 'CostCenterGrid',
columns: [
{
text: MR.locale.Name,
dataIndex: 'Name',
renderer: function(translation) {
return translation.get('ActualTranslation');
},
width: 150
}, {
text: MR.locale.Site,
dataIndex: 'Site',
renderer: function(value, meta, record) {
return record.getSite().get('ActualName');
},
width: 150
},
],
store: 'MR.store.administration.CostCenter',
}
As you can see i have a Custom renderer for the site property. The first time I render the grid, the Site isn't display. When running it again the site is then correctly visible.
How to overcome this issue?
Usually when you get such anomaly when things load at second time and such, it probably related to an Async processes.
I think that your record object is not ready or empty at first.
Make sure you get the data before you render it.
Related
I've searched the net for answer but didn't find anything. Hope you can help.
So I am relativly new to extJs. I have a navigation bar on the left. When I press the first button there, a new window opens, which contains a table and loads its data automatically. The first time it works perfect but when I close the window and open it again I get the error "cannot call method getRange of null".
If I open the second window (when I click the other button in my navigation bar), I have 4 tabs, which contain a table each. Each Tab has a toolbar with buttons (create, change, etc.). Here happens the same thing as by the first window.
I can also print those tables as a List and the first time works fine, but when I cancel the print action I get the error again.
I made sure that all buttons and tables have a different reference, so I really don't know what this could be.
Any ideas?
I add my panels, which will open the new windows here:
items: [
{
xtype: 'tabpanel',
region: 'center',
items: [{
// 1. Tab
xtype: 'componentTap-panel',
title: UMA.Locale.rm.component.componentTitle,
id: 'componentTab'
}, {
// 2. Tab
title: UMA.Locale.rm.componentGroup.componentGroupTitle,
xtype: 'componentGroupTap-panel',
id: 'componentGroupTab'
}, {
// 3. Tab
title: UMA.Locale.rm.componentTemplateTitle,
xtype: 'componentTamplate-panel',
id: 'componentTemplateTab'
},
{
//4.Tab
title: UMA.Locale.rm.inventoryTitle,
xtype: 'inventoryTab-panel',
id: 'inventoryTab'
}
]
}
]
When the window opens I add my table and toolbar:
items: [{
xtype: 'toolbar',
region: 'north',
reference: 'componentToolbar',
items: [{
text: UMA.Locale.rm.buttonCreate,
action: 'createComp'
}, {
text: UMA.Locale.rm.buttonChange,
action: 'changeComp'
}, {
text: UMA.Locale.rm.buttonMove,
action: 'moveComp'
}, {
text: UMA.Locale.rm.buttonDelete,
action: 'deleteComp'
},{
text: UMA.Locale.rm.buttonPrint,
action: 'print',
margin: {
left: 8
}, {
xtype: 'componentTable-panel',
region: 'center'
}, {
xtype: 'componentsFilter-panel',
width: 300,
region: 'east'
}]
and then autoload my table:
items:[{
xtype: 'filtergrid',
reference: 'componentGrid',
paging: true,
hideHeaders: false,
region: 'center',
selModel: new Ext.selection.RowModel({
mode: "MULTI"
}),
store: {
model: 'Component',
autoLoad: true
},
columns: [{ ...
As Sergey Novikov mentioned that getRange() is a store method.
I also faced the same error for my grid's store and after some review again and again I found that whenever I close the tab and reopen it again I am getting two instance of grid's view (which can be checked by grid.getView()) and then I reached a conclusion that whenever the grid is creating the second time the selection model of grid view is having two instances because of I am using the code for selModel as new Ext.selection.CheckboxModel({
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
})
then I changed the code for selModel as
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
}
and the error is gone for me.
Hope this will help you. :)
Use the Object() constructor to test whether the object is one of three subtypes:
null object
object object
array object
For example:
function foo() { return {"hi":"bye" } }
function bar() { return null }
function baz() { return [1,2,3] }
function testObject(myObject)
{
if (Object(myObject).hasOwnProperty("0") )
{
/* Call getRange */
return 'yes';
}
else
{
/* throw an exception */
return 'no';
}
}
console.log(testObject(foo()), testObject(bar()), testObject(baz()) );
I have a grid with cell editing plugin on it. When i click the cell i want to edit, sometimes the dropdown list of the combo box is behind the grid/window (I can not see it, but if i modify the window size i can see the combo box items behind it).
My code looks like this (I have a window which contains this form):
items: [{
xtype: 'form',
items: [
me.currentMultipleValuesGrid = Ext.create('Ext.grid.Panel', {
store: me.gridStoreToValidate,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
delay: 10
})],
listeners: {
validateedit: function (editor, cell, eOpts) {
//cell.cancel = true;
}
},
columns: [{
header: GTR(CLNAME(me), 'colSource.Text', 'Source'),
dataIndex: 'source',
flex: 1
}, {
dataIndex: 'name',
header: GTR(CLNAME(me), 'colLinkDestination.Text', 'Link destination'),
editor: {
xtype: 'combobox',
queryMode: 'local',
valueField: 'nr',
displayField: 'name',
store: me.comboBoxEditorStore,
listeners: {
change: function (thisCmb, newValue, oldValue) {
},
beforerender: function (thisCmb, eOpts) {
}
}
},
flex: 1
}, {
dataIndex: 'linkdestination',
hidden: true
}]
})]
}]
I think it is a layout problem, so I tried different layouts (anchor and fit) assigned to window, grid or form, with various combinations of them. No success so far. Any ideas? Thank you. I am using Extjs 4.0.7
I solved this a while ago. Came back to post the answer, in case someone needs it. It seems it is a Sencha bug, which causes the drop down list to be displayed behind the window, when the window is modal (like it was in my case). I managed to make a workaround, by assigning a css class to the drop down list of the combo, by adding this in combo settings :
listConfig: { cls: 'clsZIndexMax' }
where clsZIndexMax is my css class containing z-index: 100000 !important;
PS: I had this bug in version 4.0.7, don't know if they already solved it in future versions.
Hy there,
I have a very basic example with a grid with only 1 item and a button which updates this entry with the set-method of the underlying record.
The problem is, that if the item is selected at the time the record gets updated by pressing the button, the selection gets removed and it's not possible to select it anymore afterwards.
Working example: http://jsfiddle.net/fu2Xq/2/
Ext.onReady(function() {
var personsGrid = Ext.create('Ext.grid.Panel', {
width: 150,
height: 100,
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: [ 'name' ],
data: [{ name: 'Stephen' }]
}),
columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }],
});
var txtField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'New name',
labelWidth: 70,
width: 150,
value: 'Alex',
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: 'Rename person',
width: 150,
renderTo: Ext.getBody(),
handler: function() {
var rec = personsGrid.getStore().getAt(0);
rec.set('name', txtField.getValue());
}
});
});
Seems like a bug to me because after reordering the name-column the selection reappears...
I'd really appreciate some comment on this!
Thanks
edit: reformated some code...
It's a bug in ExtJS 4.1.1 which seems to be solved in 4.1.3 and can be worked around by calling the refresh-method of the grid's view after updating the record:
http://jsfiddle.net/fu2Xq/7/
handler: function() {
var rec = personsGrid.getStore().getAt(0);
rec.set('name', txtField.getValue());
personsGrid.getView().refresh();
}
I got this answer from the Sencha forum:
http://www.sencha.com/forum/showthread.php?253287-Item-in-grid-is-deselected-after-record-has-been-modified-with-set-method&p=928197&viewfull=1#post928197
On headerclick event of column headers, old selections from grid view have remembered and after rendering sorted view these records are getting selected again.
While in case of rec.set(), Instead of datachanged, 'update' event of Ext.data.store is getting fired. But there is no implementation related to select old records as same as headerclick on 'update' event.
So you have to implemet selection of records on after rec.set().
Here is discussion about similar issue.
I am having trouble getting a ComboBox in ExtJS to display the dropdown items. I originally was using an XmlStore to load the data dynamically, but to make sure that wasn't the problem, I took an existing ComboBox that uses a simple ArrayStore (and currently works elsewhere in my application) to see if it would work, still with no luck.
When using Chrome's developer tools, when I click on the ComboBox element, I get ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined and nothing shows up for a dropdown.
Here is my code:
EventForm = Ext.extend(Ext.form.FormPanel, {
constructor: function(config) {
config = Ext.apply({
items: [
{
layout: 'column',
xtype: 'container',
items: [
{
layout: 'form',
xtype: 'container',
columnWidth: 0.5,
items: [
{
fieldLabel: 'My Combo Box'
name: 'mycombobox',
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['size'],
data: [
['50'],
['100'],
['150'],
['200']
]
}),
displayField: 'size',
valueField: 'size',
forceSelection: true,
editable: false,
triggerAction: 'all',
mode: 'local',
listWidth: 60,
width: 60
}
]
}, {
// another column here similar to above
}
]
}
]
}, config);
EventForm.superclass.constructor(config);
}
});
You are not calling the constructor of EventForm's superclass correctly. Change the last line of your constructor function to read:
EventForm.superclass.constructor.call(this, config);
Your data array must contain a list of objects, and the keys you provided by fields must be the keys your data refers to in those objects. The correct syntax for your data array could be:
data: [
{'size':'50'},
{'size':'100'},
{'size':'150'},
{'size':'200'}
]
(could be, because I have no chance right now to verify)
I seem to be having a weird issue here. An extended component has the following code:
MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, {
closable: true,
relationshipId: null,
documentId: null,
title: 'Relationship',
initComponent: function () {
if (!this.verifyRequiredData()) {
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
return;
}
// Build components
this.tbar = this.buildToolbar();
this.items = this.buildDetailItemArray();
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
},
verifyRequiredData: function () {
// Verification code here
},
buildDetailItemArray: function () {
return [{
xtype: 'fieldset',
title: 'Details',
collapsible: true,
autoHeight: true,
items: [{
xtype: 'hidden',
name: 'Id'
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name'
}, {
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description'
}, {
xtype: 'button',
text: 'Save',
name: 'saveButton'
}]
}];
},
buildToolbar: function () {
return new Ext.Toolbar({
// Toolbar Config
});
}
});
The issue is that when this panel renders, the toolbar is the only thing that renders. Through debugging I can see that BuildDetailItemArray() is being called correctly and returning the correct result.
It gets even weirder when I comment out the this.tbar = line, because when the toolbar is not present, the fieldset and field renders correctly. This occurs even if I extend Panel instead of FormPanel. I also tried abstracting out the form fields into it's own component, and the same thing occurs.
Anyone have any idea why this doesn't seem to work?
What sort of layout are you trying to put this panel into? Also, are you setting a height for this panel?
Often, if you aren't specifying a height for the component to be added (in your case, this panel), or you're not setting an anchor if using an AnchorLayout, component content won't be shown, but the toolbar still will.
It'd be good to know the context of this panel in your overall layout.