PDA

View Full Version : Ext.grid.Panel && Ext.form.field.ComboBox editor



Ex_Soft
4 Feb 2012, 2:18 PM
MVC
Model


Ext.define("TG.model.Country", {
extend: "Ext.data.Model",
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
"Value"
]
});

Ext.define("TG.model.Staff", {
extend: "Ext.data.Model",
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
"Name",
{ name: "Salary", type: "float" },
{ name: "Dep", type: "int" },
{ name: "BirthDate", type: "date", dateFormat: "MS" }
]
});

Store


Ext.define("TG.store.Countries", {
extend: "Ext.data.Store",
model: "TG.model.Country",
autoLoad: true,
proxy: {
type: "ajax",
url: "Country.xml",
reader: {
type: "xml",
record: "row",
idProperty: "Id",
totalProperty: "total",
successProperty: "success"
}
}
});

Ext.define("TG.store.Staffs", {
extend: "Ext.data.Store",
model: "TG.model.Staff",
autoLoad: true,
pageSize: 2,
proxy: {
type: "ajax",
api: {
create: "Staff.aspx?action=create",
read: "Staff.aspx?action=read",
update: "Staff.aspx?action=update",
destroy: "Staff.aspx?action=destroy"
},
reader: {
type: "json",
root: "staffs",
idProperty: "Id",
totalProperty: "total",
successProperty: "success",
messageProperty: "message"
},
listeners: {
exception: function (proxy, response, operation, eOpts) {
if (window.console && console.log)
console.log("Proxy.Exception");
}
}
}
});

View


Ext.define("TG.view.staff.List", {
extend: "Ext.grid.Panel",
alias: "widget.stafflist",

initComponent: function () {
var
storeCountries = Ext.create("TG.store.Countries"),
/*cbCountries = Ext.create("Ext.form.field.ComboBox", {
store: storeCountries,
valueField: "Id",
displayField: "Value",
emptyText: "Select...",
loadingText: "Loading...",
allowBlank: true,
triggerAction: "all",
editable: false,
mode: "local",
forceSelection: true,
selectOnFocus: true,
lazyRender: true,
listClass: "x-combo-list-small"
}),*/
countriesRenderer = function (value, metaData, record, rowIndex, colIndex, store, view) {
var
countryRecord;

return (countryRecord = storeCountries.getById(value)) ? countryRecord.get("Value") : "!storeCountries.getById(value)";
};

Ext.apply(this, {
title: "All Staffs",
store: "Staffs",

columns: [
{ header: "Name", dataIndex: "Name", flex: 1, editor: { xtype: "textfield"} },
{ header: "Salary", dataIndex: "Salary", flex: 1, editor: { xtype: "numberfield"} },
{ header: "Country", dataIndex: "Dep", flex: 1, renderer: countriesRenderer, editor: /*cbCountries Why not???!!!*/ {
xtype: "combobox",
store: storeCountries,
valueField: "Id",
displayField: "Value",
emptyText: "Select...",
loadingText: "Loading...",
allowBlank: true,
triggerAction: "all",
editable: false,
mode: "local",
forceSelection: true,
selectOnFocus: true,
lazyRender: false,
listClass: "x-combo-list-small"
}
},
{ header: "BirthDate", dataIndex: "BirthDate", renderer: Ext.util.Format.dateRenderer("d.m.Y"), flex: 1, editor: { xtype: "datefield", format: "d.m.Y"} }
],

selType: "rowmodel",
plugins: [
Ext.create("Ext.grid.plugin.CellEditing", {
clicksToEdit: 2
})
]
});

this.callParent();
}
});

1. Why is "TG.store.Countries" loaded twice?
2. "TG.store.Countries" hasn't been loaded when "TG.view.staff.List" is rendering (countriesRenderer returns !storeCountries.getById(value)).
3. "TG.store.Countries" is loaded again when I expand combo at first time. Why?

P.S. Why I can't use Ext.form.field.ComboBox in editor like Ext3?

Farish
5 Feb 2012, 1:28 AM
About point 3:

use queryMode: 'local' and not mode: 'local'. There is no config 'mode' in ExtJS 4 combobox.

You have set triggerAction: 'all' but not specified 'allQuery'. This will also send an empty query to the server since 'allQuery' is '' by default.

This should solve the problem of the combo loading again.

Ex_Soft
5 Feb 2012, 11:45 PM
About point 3:

use queryMode: 'local' and not mode: 'local'. There is no config 'mode' in ExtJS 4 combobox.

Copy -> Paste - must die. I've copied this chunk of code from my old Ext3 code.

Ex_Soft
6 Feb 2012, 12:17 PM
Any ideas?

Farish
6 Feb 2012, 12:37 PM
which problems remain now?

Ex_Soft
6 Feb 2012, 10:45 PM
which problems remain now?


...
1. Why is "TG.store.Countries" loaded twice?
2. "TG.store.Countries" hasn't been loaded when "TG.view.staff.List" is rendering (countriesRenderer returns !storeCountries.getById(value)).
...
P.S. Why I can't use Ext.form.field.ComboBox in editor like Ext3?
still exists...

Farish
6 Feb 2012, 11:56 PM
it might be because the store is not loaded when you are rendering the view. before that statement, print out the store in the console and see what it contains. if it doesnt contain any records, that means its not loaded yet.

you can do the view rendering on the load event of that store.


store.on('load', function() {
// do things here which are dependent on store's records
});

not sure about point 1. is it loaded again when u press the trigger or just loaded twice when initiated?

Ex_Soft
7 Feb 2012, 12:42 AM
it might be because the store is not loaded when you are rendering the view. before that statement, print out the store in the console and see what it contains. if it doesnt contain any records, that means its not loaded yet.

you can do the view rendering on the load event of that store.


store.on('load', function() {
// do things here which are dependent on store's records
});

I use MVC architecture.


not sure about point 1. is it loaded again when u press the trigger or just loaded twice when initiated?
It is loaded twice when initiated.

Farish
7 Feb 2012, 1:01 AM
sorry. i have run out of ideas.

Ex_Soft
7 Feb 2012, 1:04 AM
BTW, in M$ IE countriesRenderer is called twice too.


countriesRenderer = function (value, metaData, record, rowIndex, colIndex, store, view) {
var
countryRecord;

return (countryRecord = storeCountries.getById(value)) ? countryRecord.get("Value") : "!storeCountries.getById(value)";
}

At first I can see !storeCountries.getById(value) a few moments and after that value of record is shown.
In Google Chrome it works randomly. In FF it doesn't work at all.

Farish
7 Feb 2012, 1:21 AM
did u try printing the store before the return? it looks like the store isnt loaded.

Ex_Soft
7 Feb 2012, 1:55 AM
Full log:


Ext.application.launch
Store.beforeload (Staffs)
Store.beforeload (Countries)
Store.beforeload (Countries)
storeCountries.count(): 0 (countriesRenderer)
storeCountries.count(): 0 (countriesRenderer)
Store.load: successful=true (Staffs)
Store.load: successful=true (Countries)
Store.load: successful=true (Countries)



Ext.application.launch
Store.beforeload (Staffs)
storeCountries.count(): 0 (countriesRenderer)
storeCountries.count(): 0 (countriesRenderer)
Store.load: successful=true (Staffs)
Store.beforeload (Countries)
Store.beforeload (Countries)
Store.load: successful=true (Countries)
Store.load: successful=true (Countries)
storeCountries.count(): 3 (countriesRenderer)
storeCountries.count(): 3 (countriesRenderer)



Ext.application.launch
Store.beforeload (Staffs)
Store.beforeload (Countries)
Store.beforeload (Countries)
Store.load: successful=true (Countries)
Store.load: successful=true (Countries)
storeCountries.count(): 3 (countriesRenderer)
storeCountries.count(): 3 (countriesRenderer)
Store.load: successful=true (Staffs)

Farish
7 Feb 2012, 2:41 AM
I dont know about the MVC Architecture but count = 0 means that the record you are looking for isnt in the store (it isnt loaded) and so you get the 2nd parameter from the conditional operator you have in the return.

Ex_Soft
7 Feb 2012, 3:12 AM
I've said about it

"TG.store.Countries" hasn't been loaded when "TG.view.staff.List" is rendering

Ex_Soft
7 Feb 2012, 11:42 AM
So, and what about p. 1, 2?