extjs form submit using Ext.DIrect - javascript

i want to submit a form using Ext.Direct and iam following all the guidelines present in the documentation still im getting this weird error
Error: Ext.data.Connection.setOptions(): No URL specified
this is the javascript code of my form
Ext.define('LOGIN.view.SignIn', {
extend: 'Ext.form.Panel',
alias: 'widget.signin',
title: 'Sign-In',
items: [{
xtype: 'textfield',
name: 'UserName',
fieldLabel: 'UserName',
allowBlank: 'false'
}, {
xtype: 'textfield',
name: 'Password',
fieldLabel: 'Password',
allowBlank: 'false',
inputType: 'password'
}],
buttons: [{
text: 'Sign-In',
handler: function () {
this.up('form').getForm().submit({});
}
}, {
text: 'Sign-Up -->',
disabled: true,
handler: function () {
this.up('#LoginPanel').getLayout().setActiveItem(1);
}
}],
api: {
submit: LogIn.SignIn
}
})
what should i change?

I found out the answer digging into the framework.
I need to use the following code and define the api in the constructor because I guess this particular intialConfig isn't automatically taken
Here is the code
Ext.define('LOGIN.view.SignIn', {
extend: 'Ext.form.Panel',
alias: 'widget.signin',
title: 'Sign-In',
constructor: function (config) {
Ext.applyIf(config, {
// defaults for configs that should be passed along to the Basic form constructor go here
api: {
submit:LogIn.SignIn
}
});
this.callParent(arguments);
},
items: [{
xtype: 'textfield',
name: 'UserName',
fieldLabel: 'UserName',
allowBlank: 'false'
}, {
xtype: 'textfield',
name: 'Password',
fieldLabel: 'Password',
allowBlank: 'false',
inputType: 'password'
}],
buttons: [{
text: 'Sign-In',
handler: function () {
this.up('form').getForm().submit();
}
},
{
text: 'Sign-Up -->',
disabled: true,
handler: function () {
this.up('#LoginPanel').getLayout().setActiveItem(1);
}
}]
})

One thing to look out for here.
If you are using extdirectspring you will need to annotate your server side method with:
#ExtDirectMethod(ExtDirectMethodType.FORM_POST)
public ExtDirectFormPostResult doStuff(AddAttachmentRequest request)
{
return null;
}
It is also mandatory to use ExtDirectFormPostResult aswell. If you don't it just wont work.
If you use a normaly extdirect method then no file data will be sent.
It also looks like the type you need on the other end is MultipartFile eg something like:
public class AddAttachmentRequest {
private long id;
private MultipartFile file;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public MultipartFile getFile() {
return file;
}
public void setFile(MultipartFile file) {
this.file = file;
}
}

Related

ExtJs: load a single gird from two different APIs

I have two entities, sent from two different APIs, with a one to one relationship.
I want to load both models in the same grid panel. The problem is that I can only load one store. To load the other store, I attached a callback to the grid reload event which edits the grid DOM manually to insert data form the second store.
My Question is: Can I load both the model and the association without using DOM hacks like I did?
The entities from APIs look like this:
Get /Users/Details:
{
"Id" : "55b795827572761a08d735ac",
"Username" : "djohns",
"Email" : "admin#mail.com",
"FirstName" : "Davey",
"LastName" : "Johns"
}
And:
Get /Users/Rights:
{
"_id" : "55b795827572761a08d735ac",
"Status" : "Activated",
"Roles" : [
"portal",
"dataApp"
]
}
Notice the same id, which is used in the API as the key/foreign key).
Now these are the models:
Ext.define('Portal.model.users.UserRights', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
mapping: 'Id'
},
{
name: 'Status'
},
{
name: 'UserId',
mapping: 'Id',
reference: 'Portal.model.users.UserDetails'
}
],
schema: {
namespace: 'Portal.model.users',
proxy: {
type: 'rest',
url: Portal.util.Util.constants.apiBaseURL + 'Users/Rights',
reader: {
type: 'json',
rootProperty: 'Objects'
}
}
}
});
And:
Ext.define('Portal.model.users.UserDetails', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
mapping: 'Id'
},
'FirstName',
'LastName',
'Username',
'Email'
],
});
And I defined a store for user details (while the store of the user rights is inside its own model):
Ext.define('Portal.store.UsersDetails', {
extend: 'Ext.data.Store',
model: 'Portal.model.users.UserDetails',
proxy: {
type: 'rest',
url: Portal.util.Util.constants.apiBaseURL + 'Users/Details',
reader: {
type: 'json',
rootProperty: 'Objects'
}
}
});
Here is how I configured the Grid:
Ext.define('Portal.view.users.UsersGrid', {
extend: 'Ext.grid.Panel',
store: 'UsersDetails',
columns: [
{
dataIndex: 'id',
text: 'Id'
},
{
dataIndex: 'Username',
text: 'Username'
},
{
dataIndex: 'Email',
text: 'Email'
},
{
dataIndex: 'FirstName',
text: 'First Name'
},
{
dataIndex: 'LastName',
text: 'Last Name'
},
{
text: "Status",
cls: "status-column",
renderer: function (value, meta, record) {
return "loading...";
}
}
],
loadUserRights: function () {
var columns = this.getEl().select('.status-column');
var cells = this.getEl().select(".x-grid-cell-" + columns.elements[0].id + " .x-grid-cell-inner");
data = this.getStore().getData();
Ext.each(data.items, function (record, index) {
var userRights = record.userUserRights();
userRights.load({
callback: function (records, operation, success) {
if (success) {
cells.elements[index].innerText = userRights.data.items[0].data.Status;
}
}
});
});
}
});
And then I load the gird from an external function:
grid.getStore().reload({
callback: function (records, operation, success) {
grid.loadUserRights();
}
});

XTemplate definition on items property of a ListItem

I'm using Sencha 2.3.0 and I want to have a XTemplate side-to-side to a component (textfield) on a ListItem. The code above works fine for DataView/DataItem, but I want to use the grouped property that is only available on List/ListItem.
The nested Xtemplate gets rendered fine as DataItem. How can I make it work for ListItem? I'm also receptive for solutions that drop this nested structure and use the xtemplate as tpl property directly on the ListItem (of course the textfield with listeners must be implemented as well).
list
Ext.define( 'app.view.myList', {
//extend: 'Ext.dataview.DataView',
extend: 'Ext.dataview.List',
xtype: 'mylist',
requires: [
'app.view.MyItem'
],
config: {
title: "myTitle",
cls: 'mylist',
defaultType: 'myitem',
grouped: true,
store: 'myStore',
useComponents: true,
itemCls: 'myitem',
items: [
{
// some components
}
]
}
});
listitem
Ext.define( 'app.view.myItem', {
//extend: 'Ext.dataview.component.DataItem',
extend: 'Ext.dataview.component.ListItem',
xtype: 'myitem',
config: {
cls: 'myitem',
items: [
{
xtype: 'component',
tpl: new Ext.XTemplate([
'<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
//some xtemplate content
'</table>'
].join( "" ),
{
compiled: true
})
},
{
label: 'some label',
cls : 'myitemtextfield',
xtype: 'textfield',
name: 'myitemtextfield'
}
]
}
});
Thanks in advance!
Modifed /touch-2.4.2/examples/list/index.html
The model:
Ext.define('model1', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
}
});
The CustomListItem
Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
xtype: 'basic-dataitem',
requires: [
'Ext.Button',
'Ext.Component',
'Ext.layout.HBox',
'Ext.field.Checkbox'
],
config: {
dataMap : {
/* getFirstname : {
setData : 'firstName'
},*/
getLastname : {
setValue : 'lastName'
}
},
layout: {
type: 'hbox',
height:'200px',
},
firstname: {
cls: 'firstname',
xtype:'component',
data:{data:'hej'},
tpl: new Ext.XTemplate([
'<H1>',
'{data}',
'</H1>'
].join(""),
{
compiled: true
})
},
lastname: {
xtype:'textfield',
css:'lastname'
}
},
applyFirstname : function (config) {
return Ext.factory(config, Ext.Component, this.getFirstname());
},
updateFirstname : function (newName) {
if (newName) {
this.add(newName);
}
},
applyLastname : function (config) {
return Ext.factory(config, Ext.Component, this.getLastname());
},
updateLastname : function (newAge) {
if (newAge) {
this.add(newAge);
}
},
applyFirstName: function (config) {
return Ext.factory(config, 'Ext.Component', this.getLastname());
},
updateRecord: function(record) {
if (!record) {
return;
}
this.getFirstname().setData({data:record.get("firstName")});
this.callParent(arguments);
}
});
The store
var store = Ext.create('Ext.data.Store', {
//give the store some fields
model: 'model1',
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function (record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
The list
xtype: 'list',
useSimpleItems: false,
defaultType: 'basic-dataitem',
id: 'list',
ui: 'round',
//bind the store to this list
store: store

Populating EXT JS Store in a EXT form Panel

Using ASP.NET MVC action method to return Json to a view in order to display the data in a EXT JS form. I am always getting the "record" value as null in the function everythingLoaded even though i can see the action method is returning the JSON data after the Ext.Create. What i am trying to achieve is populate the firstName and lastName param's passed back from the action method to the textbox inside the panel. Can you help? Below is the code
->App.JS
Ext.onReady(function() {
//Define Store
Ext.define('StudentModel', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'birthDate', type: 'date' },
{ name: 'street', type: 'string' },
{ name: 'apartment', type: 'string' },
{ name: 'city', type: 'string' },
{ name: 'state', type: 'string' },
],
validations: [{
type: 'presence',
field: 'firstName'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'StudentModel',
storeId: 'StudentStoreId',
proxy: {
type: 'ajax',
url: '/Home/GetStudentSubmissions',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: { callback: everythingLoaded }
}
);
function everythingLoaded()
{
var record = store.getAt(0);
//Here record is always null
Ext.form('MyPanel').getForm().loadRecord(record);
}
Ext.define('StudentView', {
extend: 'Ext.form.Panel',
id: 'MyPanel',
alias: 'widget.StudentView',
title: 'Student Information',
resizable: false,
collapsible: true,
store:store,
bodyPadding: '5',
buttonAlign: 'center',
border: false,
trackResetOnLoad: true,
layout: {
type: 'vbox'
},
defaults: {
xtype: 'textfield',
msgTarget: 'side',
labelAlign: 'top',
labelStyle: 'font-weight:bold'
},
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
width: '100%',
fieldDefaults: {
labelAlign: 'top',
labelStyle: 'font-weight:bold'
},
items: [{
fieldLabel: 'First Name',
name: 'firstName',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'lastName',
allowBlank: false
}]
}]
});
//Here count is always 0
var i = store.getCount();
Ext.create('widget.StudentView', {
renderTo: 'studentMasterForm'
});
});
-> C# Action Method
public JsonResult GetStudentSubmissions()
{
return Json(GetStudents(), JsonRequestBehavior.AllowGet);
}
public Student GetStudents()
{
Student studobj = new Student();
studobj.Id = 1;
studobj.firstName = "Aravind";
studobj.lastName = "R";
studobj.state = "NJ";
studobj.street = "Center Grove";
studobj.birthDate = new DateTime(1989, 6, 6);
studobj.apartment = "DD8";
studobj.city = "XYZ";
return studobj;
}
}
->Student Model Class
public class Student
{
public int Id { get; set; }
public string firstName { get; set; }
public string lastName { get; set; }
public DateTime birthDate { get; set; }
public string street { get; set; }
public string apartment { get; set; }
public string city { get; set; }
public string state { get; set; }
}
Your c# code returns one object "Student", but it is supposed to return an object which have an array of students as its "data" property.
You need to return an object of this type:
public class ExtStore
{
public List<Student> data = new List<Student>();
}
this way for example:
public ExtStore GetStudents()
{
Student studobj = new Student();
studobj.Id = 1;
studobj.firstName = "Aravind";
studobj.lastName = "R";
studobj.state = "NJ";
studobj.street = "Center Grove";
studobj.birthDate = new DateTime(1989, 6, 6);
studobj.apartment = "DD8";
studobj.city = "XYZ";
ExtStore exs = new ExtStore();
exs.data.Add(studobj);
return exs;
}

Populating dropdown from database via Struts 2 action class (using jtable)

I am using jtable http://jtable.org/ in my project. jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript.
http://i62.tinypic.com/3461eo3.jpg
jtable code for above form is
HTML code:
<div id="StudentTableContainer"></div>
JavaScript code:
<script type="text/javascript">
$(document).ready(function () {
$('#StudentTableContainer').jtable({
title: 'Student List',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '/Demo/StudentList',
deleteAction: '/Demo/DeleteStudent',
updateAction: '/Demo/UpdateStudent',
createAction: '/Demo/CreateStudent'
},
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '30%'
},
EmailAddress: {
title: 'Email address',
list: false
},
Password: {
title: 'User Password',
type: 'password',
list: false
},
Gender: {
title: 'Gender',
options: { 'M': 'Male', 'F': 'Female' },
list: false
},
ContinentalId: {
title: 'Continental',
options: '/Demo/GetContinentalOptions',
list: false
},
CountryId: {
title: 'Country',
dependsOn: 'ContinentalId', //Countries depends on continentals. Thus, jTable builds cascade dropdowns!
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/Demo/GetCountryOptions?continentalId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/Demo/GetCountryOptions?continentalId=' + data.dependedValues.ContinentalId;
},
list: false
},
CityId: {
title: 'City',
width: '30%',
dependsOn: 'CountryId', //Cities depends on countries. Thus, jTable builds cascade dropdowns!
options: function (data) {
if (data.source == 'list') {
//Return url of all cities for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/Demo/GetCityOptions?countryId=0';
}
//This code runs when user opens edit/create form or changes country combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId;
}
},
BirthDate: {
title: 'Birth date',
type: 'date',
displayFormat: 'yy-mm-dd',
list: false
},
Education: {
title: 'Education',
list: false,
type: 'radiobutton',
options: [
{ Value: '1', DisplayText: 'Primary school' },
{ Value: '2', DisplayText: 'High school' },
{ Value: '3', DisplayText: 'University' }
]
},
About: {
title: 'About this person',
type: 'textarea',
list: false
},
IsActive: {
title: 'Status',
width: '15%',
type: 'checkbox',
values: { 'false': 'Passive', 'true': 'Active' },
defaultValue: 'true'
},
RecordDate: {
title: 'Record date',
width: '25%',
type: 'date',
displayFormat: 'yy-mm-dd',
create: false,
edit: false,
sorting: false //This column is not sortable!
}
}
});
//Load student list from server
$('#StudentTableContainer').jtable('load');
});
</script>
I want to have a Dropdown in my project which should take values from database through struts2 action class .
Like in the above demo code, list of continents can be accessed from database via struts2 action class (using URL pattern /Demo/GetContinentalOptions
As jtable only understands json so please guide me what should I write in Struts2 Action class and Struts.xml
Note: In your sample code you can even hardcode dropdown values
You can populate your json field with the following action. You also need a convention plugin to use annotations. To use json result you need a json plugin.
#Action(value="GetContinentalOptions", results=#Result(type="json", params = {"root", "map"}))
public class ContinentalOptionsAction extends ActionSupport {
Map<String, String> map=new HashMap<>();
public Map<String, String> getMap() {
return map;
}
#Override
public String execute() throws Exception {
map.put("1", "Asia");
map.put("2", "America");
map.put("3", "Europe");
map.put("4", "Africa");
return SUCCESS;
}
}
In the options function
var options = [];
$.ajax({ //get from server
url: '<s:url action="GetContinentalOptions"/>',
dataType: 'json',
success: function (data) {
options = data;
}
});
return options;
EDIT:
Without convention plugin you should write action configuration in struts.xml
<action name="GetContinentalOptions" class="com.action.ContinentalOptionsAction">
<result type="json">
<param name="root" value="map"/>
</result>
</action>

How to set value for input 'textfield' with JavaScript

i have a method in my openDB.js logic class:
getUserByUsername: function(username) {
return this.getUsers(username).then(function(users) {
return users[ username ];
});
},
i'm getting there user with a lot of properties/values.
i have a extjs input 'textfield', and i want to get in 'value' of textfield some user information.
i know that all follow parameters has values (it is codesnippet from openDB.js CreateUser function):
.addParameter("DEPARTMENT", user.department)
.addParameter("FAX", user.fax)
.addParameter("FIRSTNAME", user.firstName)
.addParameter("FUNCTION", user["function"])
.addParameter("LASTNAME", user.lastName)
.addParameter("LOCATION", user.location)
.addParameter("MAIL", user.mail)
.addParameter("MOBILE", user.mobile)
.addParameter("PASSWORD", user.password)
i know it because its possible to check it with setTitle like this:
openDB.getUserByUsername(user.username).then(function(userDetails)
{
debugger;
me.setTitle("Welcome " + userDetails.department + "!");
});
its works fine with all properties.
but how to do it with 'textfield' value ????
items: [{
xtype: "form",
bodyPadding: 5,
border: false,
defaults: {
xtype: "textfield",
inputType: "text",
anchor: "100%"
},
items: [{
fieldLabel: 'Firstname:',
id: 'firstName',
readOnly: true,
value: user.firstName,
name: "username"
}, {
fieldLabel: 'E-Mail:',
id: 'email',
value: 'user.email',
name: "email"
}, {
Use the getValue method on the field.
var f = new Ext.form.field.Text({
renderTo: document.body,
value: 'foo'
});
console.log(f.getValue());
after couple hours of Fitign with that -> BEST SOLUTION EVER:
items: [{
fieldLabel: 'Firstname:',
id: 'firstName',
readOnly: true,
value: user.firstName,
name: "username"
}]
...
var name = Ext.getCmp('firstName').setValue('JohnRambo');

Categories