Hi,
after several other questions in this great forum I am finally in the stage of getting data displayed and modified.
As a guidline I used the doodles Tutorial.
Now I setup the widgets, parsed data to them. Data gets parsed well, as sometimes the form elements display - with the correct values. What is kind of tricky: I parse the id of the currently selected document to my CMP. Also the grid is totally dynamic. It get's a dynamic column model and dynamic data and dynamic fields via PHP. Works great.
But often I only get this in Friebug:
b[d.xtype || e] is not a constructor
Observable(d=Object { xtype="jhwproducts-page-home"}, e=undefined)ext-all.js (Zeile 7)
createContextualFragment()
The result = MODx.load at the bottom is empty and e is undefined! Which points to JHWproducts.page.Home.The div which gets inserted by the headers.php is in the DOM.
Controllers and processors get started as wished, but sometimes the GUI just won't render. The data from PHP is ok, also during those bugs.Everything comes in as JSON.
Something I am missing. But what? Tried also other widgets for the grid to test. Caching has been deactivated. Sometimes even without the grid the panel throws up this error. Strange.
Can anyone help?
The function makeGrid implements ALL GUI interface from Ext JS and gets fired after all the data got loaded from the AJAX event. The store gets the data from the same file again, will combine those two AJAX calls in one later. Just some quick datamanipulation to convert JSON to an array for the fields.
var JHWproducts = function(config) {
config = config || {};
JHWproducts.superclass.constructor.call(this,config);
};
Ext.extend(JHWproducts,Ext.Component,{
page:{},window:{},grid:{},tree:{},panel:{},combo:{},config: {}
});
Ext.reg('jhwproducts',JHWproducts);
JHWproducts = new JHWproducts();
var myFields = '';
var myFieldsArray = [];
var myColumns = '';
var myData;
var remoteJsonStore;
(function()
{
document.$_GET = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.$_GET[urlVarPair[0]] = urlVarPair[1];
}
}
}
})();
Ext.Ajax.timeout = 120000;
Ext.Ajax.request({
url: '/core/components/JHWproducts/getFields.php',
params: {id: document.$_GET['id']},
timeout: 133000,
method: 'POST',
success: function(ausgabe) {
makeGrid(ausgabe);
}
});
function makeGrid(ausgabe) {
myFields = String(Ext.decode(ausgabe.responseText).fields);
myFieldsArray = myFields.split(',');
// alert(myFieldsArray[0]);
myColumns = Ext.decode(ausgabe.responseText).columns;
myData = Ext.decode(ausgabe.responseText).data;
remoteJsonStore = new Ext.data.JsonStore({
fields : myFieldsArray,
url : '/core/components/JHWproducts/getFields.php',
baseParams: {id: document.$_GET['id']},
root : 'data',
id : 'ourRemoteStore',
autoLoad : true,
remoteSort : true
});
JHWproducts.grid.Home = function(config) {
config = config || {};
Ext.applyIf(config,{
id: 'jhwproducts-grid-home'
,url: JHWproducts.config.connectorUrl
,baseParams: { action: 'mgr/jhwproducts/getList',id:18 }
,remoteSort: true
,anchor: '97%'
,columns: myColumns
,store: remoteJsonStore
});
JHWproducts.grid.Home.superclass.constructor.call(this,config)
};
Ext.extend(JHWproducts.grid.Home,Ext.grid.GridPanel);
/* Ext.extend(JHWproducts.grid.Home,Ext.grid.EditorGridPanel);*/
/* Ext.extend(JHWproducts.grid.Home,MODx.grid.Grid);*/
Ext.reg('jhwproducts-grid-home',JHWproducts.grid.Home);
JHWproducts.panel.Home = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel'
,items: [{
html: '<h2>JHW Produktverwaltung</h2>'
,border: false
,cls: 'modx-page-header'
},{
xtype: 'modx-tabs'
,bodyStyle: 'padding: 10px'
,defaults: { border: false ,autoHeight: true }
,border: true
,items: [{
title: 'Information'
,defaults: { autoHeight: true }
,items: [
{
html: '<p>Aktualisieren Sie alle Produktangaben. Wählen Sie zuerst ein Dokument aus.</p>
',border: false
},
{
xtype: 'jhwproducts-grid-home',preventRender: false
}
]
}]
}]
});
JHWproducts.panel.Home.superclass.constructor.call(this,config);
};
Ext.extend(JHWproducts.panel.Home,MODx.Panel);
Ext.reg('jhwproducts-panel-home',JHWproducts.panel.Home);
JHWproducts.page.Home = function(config) {
config = config || {};
Ext.applyIf(config,{
components: [{ xtype: 'jhwproducts-panel-home',renderTo: 'jhwproducts-panel-home-div' }]
});
JHWproducts.page.Home.superclass.constructor.call(this,config);
};
Ext.extend(JHWproducts.page.Home,MODx.Component);
Ext.reg('jhwproducts-page-home',JHWproducts.page.Home);
}
var result;
Ext.onReady(function() {
result = MODx.load({ xtype: 'jhwproducts-page-home'});
});
