PDA

View Full Version : MVC, store proxy response on Controller, Good code solution, Full site building ...



altanmur
27 Aug 2012, 10:33 PM
Hello.
I using start Ext JS 4.1.1


But i have few problems and solution problem.


Please help me.
__________________________
I want to clear project.
Use MVC architecture.
But I can't.


I only development WebApp back end.
Solution problems:


1) Every Example not MVC.
MVC example use only one component.


for example: http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/reorder.js


2) i'm using only Ext.define and Ext.create not working Ext.widget


example: I think
VIEW:


Ext.define('CarOrder.view.module.MainmenuList',{
extend: 'Ext.grid.Panel',
alias: 'widget.mainmenuview',
id:'mainmenuview',

store: Ext.create('CarOrder.store.module.Mainmenus'), // i can use
// i want to use widget
// Ext.widget('mainmenuview'),
model: Ext.create('CarOrder.model.module.Mainmenu'), // i can use
// i want to use widget
// Ext.widget('mainmenumodel'),
title: '???',
flex: 1,
autoScroll: true,
border: 0,

hideHeaders: true,
renderTo: Ext.getBody(),
columns:[{
dataIndex: 'name',
flex: 1
}],
/* this listener worked but i not want here. i want to in controller
listeners: {
selectionchange: function (view, selections, options) {
console.log(view, selections, options);
}
},
*/
initComponent:function(){
CarOrder.view.module.MainmenuList.superclass.initComponent.apply(this, arguments);
}
});

MODEL:



Ext.define('CarOrder.model.module.Mainmenu',{
extend: 'Ext.data.Model',
alias:'widget.mainmenumodel',
fields: [{
name:'id'
},{
name:'name'
},{
name:'info'
}],
idProperty: 'id'
});

3) Store is working proxy connect php but i want to handling on Controller.


STORE:



Ext.define('CarOrder.store.module.Mainmenus',{
extend: 'Ext.data.Store',
model: 'CarOrder.model.module.Mainmenu',
alias: 'widget.mainmenustore',

autoLoad: true,
proxy: {
type: 'ajax',
url : 'php/lib/select.php',
method: 'GET',

extraParams:{
'table': 'test_menu',
'columns': '*',
'where': '1',
'action':'mainmenu'
},
reader: {
type: 'json',
root: 'result'
}
}
});

CONTROLLER:


Ext.define('CarOrder.controller.Mainmenu', {
extend: 'Ext.app.Controller',
stores: ['module.Mainmenus'], // i think connect ther store
models: ['module.Mainmenu'], // i think connect ther model
views: ['module.MainmenuList'], // i think connect ther view

refs:[{
ref: 'mainmenuview',
selector: 'mainmenuview'
}],
init: function() {
this.control({
'mainmenuview': {
selectionchange: this.onMainmenuSelect,
itemdblclick: this.onMainmenuSelect
}
});
},
// not working
listeners: {
selectionchange: function (view, selections, options) {
console.log(view, selections, options);
}
},
onMainmenuSelect:function(){
alert('select');
}
});



4) I think only first controller load on APP.js
APP.JS


Ext.Loader.setConfig({
enabled: true
});


Ext.Loader.setPath('Ext.ux', 'ext4/src/ux');
Ext.require([
'Ext.form.Panel',
'Ext.form.field.Date',
'Ext.tip.QuickTipManager',
'Ext.ux.statusbar.StatusBar',
'Ext.ux.statusbar.ValidationStatus',
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel',
'Ext.ux.layout.Center',
'Ext.util.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.ProgressBarPager'
]);
Ext.application({
name: 'CarOrder',
appFolder: 'app',
autoCreateViewport: true,

controllers: [
'module.Login'
]
});


5) how can handling Login store proxy response?


callBack function not working in controller.


solution on Mainmenu Controller.




6) I think not must


var mainmenuStore = Ext.create('CarOrder.store.module.Mainmenus');
Ext.define('CarOrder.view.module.MainmenuList',{
....
store: mainmenuStore,
....
});



I use only




Ext.define('CarOrder.view.module.MainmenuList',{
....
store: Ext.create('CarOrder.store.module.Mainmenus'),
....
});



witch one good solution?


I think i can acces mainmenuStore on any file. I like this.
But how can i implement.

I implementing:
HTML:




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">????????? ????????</title>


<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="resource/css/design.css">
<script type="text/javascript" src="ext4/ext-all-debug.js"></script>
<script type="text/javascript" src="ext4/ext-util-json.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- this init.js all global object declare and init- ing -->


<script type="text/javascript" src="resource/js/declare.js"></script>
<script type="text/javascript" src="resource/js/init.js"></script>
</head>
<body></body>
</html>


declare.js


var _mainmenuListView;
var _mainmenuListModel;
var _mainmenuListStore;
var _mainmenuListController;

init.js


function init(){
_mainmenuListView = Ext.create('CarOrder.view.module.MainmenuList');
_mainmenuListModel = Ext.create('CarOrder.model.module.Mainmenu');
_mainmenuListStore = Ext.create('CarOrder.store.module.Mainmenus');
_mainmenuListController = Ext.create('CarOrder.controller.module.Mainmenu');
}



what is this solution?
7)


..
store: 'mainmenustore',
..
Uncaught TypeError: Cannot read property 'buffered' of undefined



thanks for read.
Please replay.