PDA

View Full Version : Change code to MVC



sencha.user
16 Jan 2013, 3:05 AM
Hi,

Can someone help me change some code to MVC type?

Here is a plugin,

/**
* Ext.ux.grid.DynamicGridPanel
*/
Ext.define('Ext.ux.grid.DynamicGridPanel', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.dynamicgrid',
/**
* initialising the components
*/
initComponent: function(){
/**
* set the config we want
*/
var config = {
columns:[],
rowNumberer: false
};

// appy to this config
Ext.apply(this, config);
// apply to the initialConfig
Ext.apply(this.initialConfig, config);
// call the arguments
this.callParent(arguments);
},
/**
* When the store is loading then reconfigure the column model of the grid
*/
storeLoad: function()
{
/**
* JSON data returned from server has the column definitions
*/
if(typeof(this.store.proxy.reader.jsonData.columns) === 'object') {
var columns = [];
/**
* adding RowNumberer as we need to add them
* before other columns to display first
*/
if(this.rowNumberer) { columns.push(Ext.create('Ext.grid.RowNumberer')); }
/**
* assign new columns from the json data columns
*/
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});
/**
* reconfigure the column model of the grid
*/
this.reconfigure(this.store, columns);
}
},
/**
* assign the event to itself when the object is initialising
*/
onRender: function(ct, position){
/**
* well, old fashion way, but works well.
*/
Ext.ux.grid.DynamicGridPanel.superclass.onRender.call(this, ct, position);
/**
* hook the store load event to our function
*/
this.store.on('load', this.storeLoad, this);
}
});

Here is the code to change to MVC type,


// Start loading the page
Ext.onReady(function(){
// we need to define the model but the field values will be parsed
// automatically since we provided fields in the metaData from server
Ext.define('dynamicModel', {
extend: 'Ext.data.Model',
//set the proxy
proxy: {
type: 'rest',
url: 'data.php' // the sample server address
}
});
// create a data store
var myStore = Ext.create('Ext.data.Store', {
model:'dynamicModel',
autoLoad:true,
});
// create dynamic grid
var myGrid = {
title:'Dynamic Grid',
xtype:'dynamicgrid',
forceFit:true,
region:'center',
store:myStore,
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore,
dock: 'bottom',
displayInfo: true
}]
};
// finally, build the main layout once all the pieces are ready.
Ext.create('Ext.container.Viewport', {
layout:'border',
items:[myGrid]
});
});

Should be simple, I tried some, but it says "name is undefined", can someone help me out?

Thanks in advance!

sencha.user
16 Jan 2013, 5:20 AM
Done that myself, I had to change xtype, when it is changed to dynamicGridPanel, it worked fine.