Sencha ExtJS 4 Examples ported to MVC

**PaulyWolly** · 13 Aug 2012 5:12 PM

First I would like to say thank you so much for taking time to do this. Your examples for MVC were the first I was really able to understand when I was a newbie and now I feel much more confident using MVC within the framework, thank to your efforts. Your book is also very refreshing. I agree Jay Garcia's book, "ExtJS in Action" is a VERY good book for newbies. I am still looking forward to the new revised "EXT in Action" for version 4.

Anyway, I have been working on a project where I need a multi-select which has a checkbox in the list to the left of each entry in the list for the combo, that is retrieved from a DB call. I have found one that works, using a store with API and proxy, but the trouble I am having is I am not able to figure out how to get the entries that I "pick" in the list to send back to the server as a CSV list instead of as an array. I am passing back static values as well as items from the combobox that I will "pick" from the list to send back to the server and store in the database. I was hoping to get your multi-select to work, since you are also using a MySQL database for your source. Is there something I am missing? I also notice that you call a DB called blog, with cities and states listings and the SQL to create these tabels is not in your ZIP for the multi-select. Can you help me to get thsi working or help me to get the multi-select working to send CSV to the server instead of array?
Thanks again

**d.velev** · 3 Sep 2012 1:52 AM

Hello Loiane,

Very nice work about examples,

Can you implement extjs4-mvc-json-crud-php-mysql to Sencha Project ?
This will be best example for most of the people here.

**Jmtrimble** · 6 Sep 2012 1:48 AM

This is great!Thanks!

**loiane** · 6 Sep 2012 11:02 AM

Originally Posted by d.velev

Hello Loiane,

Very nice work about examples,

Can you implement extjs4-mvc-json-crud-php-mysql to Sencha Project ?
This will be best example for most of the people here.

Thank you everyone!

Hi,

I am working on it. Also, I am writing a step-by-step to show how to implement it from scratch. It iwll be published on my Portuguese blog first, then I will translate it to English and post on my other blog.

**loiane** · 6 Sep 2012 11:05 AM

Originally Posted by PaulyWolly

First I would like to say thank you so much for taking time to do this. Your examples for MVC were the first I was really able to understand when I was a newbie and now I feel much more confident using MVC within the framework, thank to your efforts. Your book is also very refreshing. I agree Jay Garcia's book, "ExtJS in Action" is a VERY good book for newbies. I am still looking forward to the new revised "EXT in Action" for version 4.

Anyway, I have been working on a project where I need a multi-select which has a checkbox in the list to the left of each entry in the list for the combo, that is retrieved from a DB call. I have found one that works, using a store with API and proxy, but the trouble I am having is I am not able to figure out how to get the entries that I "pick" in the list to send back to the server as a CSV list instead of as an array. I am passing back static values as well as items from the combobox that I will "pick" from the list to send back to the server and store in the database. I was hoping to get your multi-select to work, since you are also using a MySQL database for your source. Is there something I am missing? I also notice that you call a DB called blog, with cities and states listings and the SQL to create these tabels is not in your ZIP for the multi-select. Can you help me to get thsi working or help me to get the multi-select working to send CSV to the server instead of array?
Thanks again

Hi,

Thanks!

Here is the sql script: https://github.com/loiane/extjs-link...ter/sql/script

**madmax797** · 7 Sep 2012 5:59 PM

Should have tried bit harder.. I got it working. I guess i was missing the Ext.require + something else.. Anyway, posting for benefit of some other newbies.

Hi,
can you convert this example to MVC
http://dev.sencha.com/deploy/ext-4.0.0/examples/form/forum-search.html

Iam using Extjs4.1.0
I tried, but getting name is undefined. (error at bottom)
0) my html file
<html>
<head>
<title>Live Search</title>
<link rel="stylesheet" type="text/css" href="../../framework/extjs-4.1.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../framework/extjs-4.1.0/ext-debug.js"></script>
<script type="text/javascript" src="app_liveSearch.js"></script>
</head>
<body></body>
</html>
1) my top level js file(app_liveSearch.js) is like this:
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'LiveSearchCtrl'
],
launch: function() {
Ext.require([
'Ext.data.*',
'Ext.form.*'
]);
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'liveSearchView'
}
});
}
});
2) under app/controller I have LiveSearchCtrl.js
Ext.define('AM.controller.LiveSearchCtrl', {
extend: 'Ext.app.Controller',
stores: [ 'LiveSearchStore'],
models: ['LiveSearchModel'],
views: [
'lsearch.LiveSearchView'
],

init: function() {
this.control({
'viewport > liveSearchView' : {
click: alert('loaded ')
},
'liveSearchView button' : {
click: this.popitup
}

});
},
popitup: function() {
alert('u clicked button');
}
});
3) My model is in model subdir named LiveSearchModel.js
Ext.define('AM.model.LiveSearchModel', {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url : 'http://www.sencha.com/forum/topics-remote.php',
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount'
}
},

fields: [
{name: 'id', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'},
{name: 'topicId', mapping: 'topic_id'},
{name: 'author', mapping: 'author'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}
]
});
4) My store is in store subdir as LiveSearchStore.js
Ext.define('AM.store.LiveSearchStore', {
extend: 'Ext.data.Store',
model: 'AM.model.LiveSearchModel',
pageSize: 10
});
5) My view file is under view/lsearch as LiveSearchView.js
Ext.define('AM.view.lsearch.LiveSearchView' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.liveSearchView',
renderTo: Ext.getBody(),
title: 'Search the Ext Forums',
width: 80,
bodyPadding: 10,
layout: 'anchor',
items: [
{
xtype: 'combo',
labelField: 'Select Meter',
store: 'LiveSearchStore',
anchor: '50%',
typeAhead: false,
//hideLabel: false,
//hideTrigger:true,
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',

// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' + '{excerpt}' + '</div>';
}
},
pageSize: 10,
listeners: {
select: function(combo, selection) {
var post = selection[0];
if (post) {
window.location =
Ext.String.format('http://www.sencha.com/forum/showthread.php?t={0}&p={1}', post.get('topicId'), post.get('id'));
}
}
}
},
{
xtype: 'component',
style: 'margin-top:10px',
html: 'Live search requires a minimum of 4 characters.'
}
]
});

**iplanit** · 11 Sep 2012 3:19 AM

Hi Loiane,

At this moment I have your book in my desktop.

I found it interesting, I am still reading, but it is not very useful for learning with no previous knowledge (I am new to Sencha ExtJS and I am using SenchaArchitect), but that is expected according to you.

I see there is a lot of examples of graphics,etc. Always simple stuff, but when things starts to be more complicated, realistic, etc. You cannot find good documentation and complete examples.

In your book, the most interesting part about Models, Associations and MVC architecture has a few pages. There is no information about authentication using the framework.

I think this would be nice for people that is trying to learn Ext JS 4 with no previous knowledge of Ext JS 3. Even for experienced users is useful.

Regards

**loiane** · 11 Sep 2012 4:47 AM

Thanks iplanit!

I am planing to write some posts about the topic you suggested.

**loiane** · 11 Sep 2012 4:48 AM

As requested, following is the link to the code of my ExtJS 4 CRUD MVC sample application using Sencha Architect 2.
Hope it helps you.
Soon I will post a video on my blog also showing how to do it step by step:

https://github.com/loiane/extjs4-crud-mvc-architect

**iplanit** · 11 Sep 2012 5:34 AM

I appreciate that.

Sencha ExtJS 4 Examples ported to MVC

Thread Tools

Search Thread

Display

Not able to get MultiSelect example ported over by Loiane working

Not able to get MultiSelect example ported over by Loiane working

Nice WORK

Nice WORK

request on livesearch using MVC

request on livesearch using MVC

ExtJS 4 CRUD MVC app with Sencha Architect 2

ExtJS 4 CRUD MVC app with Sencha Architect 2

Tags for this Thread