Simple form - convert to MVC

[james_D]

I have a simple form, with 1 label and 1 button. When the user clicks on the button a POST request will be made and i will populate some records on another Window.

1.) The code i have below (which is an example), doesn't use MVC, can someone help me edit the code so that it adheres to MVC standards (Put it to View, Store, and Controller)

2.) How to Navigate to a different view, when the code executes the SUCCESS block ? (Like, populate another view with data) (NAVIGATE TO ANOTHER VIEW, AND DISPLAY RECORDS THAT WAS OBTAINED FROM THE SERVER RESPONSE.)



Ext.create('Ext.form.Panel', {
title: 'Basic Form',
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 350,


// Any configuration items here will be automatically passed along to
// the Ext.form.Basic instance when it gets created.


// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',


items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField'
}],


buttons: [{
text: 'Submit',
handler: function() {
// The getForm() method returns the Ext.form.Basic instance:
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({
success: function(form, action) {
//NAVIGATE TO ANOTHER VIEW, AND DISPLAY RECORDS THAT WAS OBTAINED FROM THE SERVER RESPONSE.
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.msg : 'No response');
}
});
}
}
}]
});

[scottmartin]

Are you familiar with our MVC pattern at all? Have you read the following articles?
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
http://www.extjsframework.com/mvc/simple-mvc-application

You controller will load the different views as needed. As for loading another view .. will you load this into another tab, or replace the current view in a region, or perhaps load a window?

Scott.

[james_D]

I need to replace the current view in the region and also load a Window with controls on it. Can you show me an example ?

[james_D]

I am still having problems ordering my form to adhere to MVC standards.

My form is a single textfield with a Button. I am having problems seperating the functions in to Model Store and Controllers.

Can you help me.

[friend]

Take a look under the /examples folder in your ExtJs distribution. There a wealth of good examples there.

[james_D]

I need to replace the current view in the region and also load a Window with controls on it.

I found this in the examples http://dev.sencha.com/deploy/ext-4.0.1/examples/form/contact-form.html

B (http://dev.sencha.com/deploy/ext-4.0.1/examples/form/contact-form.html)ut, i have a button and i need to add the code that is responsible to call the Window, and i am unable to find which line of code i need to call. Can you help me here ?

I have tried this for some time now, and had no luck,.,.!

[scottmartin]

In the code you are referencing ..


handler: showContactForm

function showContactForm() {
..

// create window
win.show();
}


Calls the function in which creates the form in the window and uses win.show() to open.

Scott.

[james_D]

1.) Can i create a new View, for example NewView.js . and i can call this view from
function showContactForm() { } .

How could i do this ?

2.) how could i also pass parameters from handler: showContactForm to function showContactForm() {}

[scottmartin]

You can use something like this ...

//psuedo


// view: list
Ext.define('APP.view.contact.List', {
extend : 'Ext.grid.Panel',
alias : 'widget.app-list-contact',

..

tbar : [
{
text : 'Open Window',
action : 'showContactForm'
}
],

..

});

// view: window/form
Ext.define('APP.view.contact.Edit', {
extend : 'Ext.window.Window',
alias : 'widget.app-form-contact',

..
});

// controller
Ext.define('APP.controller.Contacts', {
..

views: ['contact.Edit'],

refs: ['ref : 'editForm', selector : 'app-form-contact'],

init : function () {
var me = this;

me.control({
// button in main list view on toolbar to open window
'app-list-contact button[action=showContactForm]' : { // button on list view to call window
click : this.showContactForm
}

});
},

showContactForm: function() {
// show form
var editForm = this.getEditForm();
editForm.show();
}

});


Regards,
Scott