Wednesday, July 27, 2011

how to submit a Ext.form.Panel to a specified URL with params?

var panel = Ext.create('Ext.form.Panel', {
id: 'businessUnit-form',
url: 'createNewBusinessUnitForList.htm',
.....
....
.....
});

formCmp.getForm().submit({
method:'POST',
params:{
id: id,
status: status,
articles: aArticles
},
...
...
});

Tuesday, July 19, 2011

Thursday, July 7, 2011

Can you help me to do this? - extjs4.0.2a problem

Following I have given you the source code. There I am doing my update to the database by simply double click on the row and then when I am going to delete a record it will return a message as there have a data violation. up to this level the program is working in well manner.

But the problem is after that delete , if I go to update any record, the proxy executes update and then destroy(delete) again.

For your further ref -

when I remove some records from this store without page refreshing, it seems that all previous deleted items are stored somewhere and sended to servlet on every new update. When I refresh page, first update is ok, but any next update again after removing a record accumulate previous removed records. What I do wrong and how I can fix it?


====CODE====
============

/*

Ext JS 4.0.2a
*/

Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.dd.*']);

Ext.define('StakeholderType', {
extend: 'Ext.data.Model',
fields: [{
name: 'stakeholderTypeId',
type: 'int',
useNull: false
}, 'code', 'description', 'sector']
});

Ext.data.proxy.Rest.override({
actionMethods : {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
}
});

Ext.onReady(function(){

var jsonReader = Ext.create('Ext.data.reader.Json',{
root: 'data',
totalProperty: 'total',
successProperty: 'success',
idProperty: 'stakeholderTypeId',
messageProperty: 'message'
});

var jsonWriter = Ext.create('Ext.data.writer.Json',{
root: 'data',
encode: true,
writeAllFields: true
});

var proxy = Ext.create('Ext.data.proxy.Rest',{
api: {
read : 'stakeholderTypeView.htm',
update : 'stakeholderTypeEdit.htm',
destroy : 'stakeholderTypeDelete.htm'
},
reader : jsonReader,
writer : jsonWriter,
idProperty: 'stakeholderTypeId',
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'ERROR',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}

});

var store = Ext.create('Ext.data.Store', {
autoLoad : true,
autoSync : true,
model : 'StakeholderType',
proxy : proxy
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
clicksToEdit: 2
});

var grid = Ext.create('Ext.grid.Panel', {
plugins: [rowEditing],
width: 325,
height: 250,
frame: true,
title: 'Stakeholder Types',
store: store,
iconCls: 'item-agent',
columns: [{
header: document.getElementById("code").value,
width: 70,
sortable: false,
dataIndex: 'code'
}, {
header:document.getElementById("description").value,
width: 145,
sortable: true,
dataIndex: 'description',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: document.getElementById("sector").value,
width: 85,
sortable: false,
dataIndex: 'sector',
field: {
xtype: 'textfield'
}
}],
listeners: {
selectionchange: function(model, records) {

if (records[0]) {
this.up('form').getForm().loadRecord(records[0]);
}

}
},
dockedItems: [{
xtype: 'toolbar',
items: [{
text: document.getElementById("edit").value ,
iconCls: 'icon-user-add',
handler: function(){

var editS = grid.getView().getSelectionModel().getSelection()[0];
rowEditing.startEdit(editS,0);
}
}, '-', {
itemId: 'delete',
text : document.getElementById("remove").value,
iconCls: 'icon-user-delete',
disabled: false,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if(selection){
var con = confirm('Are you sure?');
if (con == true) {
grid.store.remove(selection);
grid.store.load({
scope : this,
callback: function(records, operation, success) {
//the operation object contains all of the details of the load operation
console.log(records);
}
});
}
}
}
}]
}]
});


var fieldSet = Ext.create('Ext.form.FieldSet',{
columnWidth: 1,
margin: '0 0 0 10',
title:'StakeholderType details',
width: 300,
labelWidth: 90,
defaultType: 'textfield',
items: [{
fieldLabel: 'Code',
width: 200,
disabled:true,
name: 'code'
},{
fieldLabel: 'Description',
disabled:true,
width: 250,
name: 'description'
},{
fieldLabel: 'Industrial Sector',
disabled:true,
width: 200,
name: 'sector'
}]
});

var panel = Ext.create('Ext.form.Panel', {
id: 'stakeholder-form',
frame: true,
title: 'Mapping Stakeholder',
bodyPadding: 5,
width: 650,
layout: 'column', // Specifies that the items will now be arranged in columns

fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},

items: [
grid,
fieldSet
],
renderTo: 'grid_to_form'
});

});

ExtJS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example

http://java.dzone.com/articles/extjs-spring-mvc-3-and?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+javalobby%2Ffrontpage+%28Javalobby+%2F+Java+Zone%29

Tuesday, July 5, 2011

GUI sample for grid panel with extjs 4.0.2a

Sample extjs code for creating a proxy between a data store at client side and backend.

extjs 4.0.2a example..

======This should be overriden globally for use ===============
Ext.data.proxy.Rest.override({
actionMethods : {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
}
});
===============================================================

var jsonReader = Ext.create('Ext.data.reader.Json',{
root: 'data',
totalProperty: 'total',
successProperty: 'success',
idProperty: 'stakeholderTypeId',
messageProperty: 'message'
},StakeholderType);

var jsonWriter = Ext.create('Ext.data.writer.Json',{
root: 'data',
encode: true,
writeAllFields: true
});


var proxy = Ext.create('Ext.data.proxy.Rest',{
api: {
read : 'stakeholderTypeView.htm',
update : 'stakeholderTypeEdit.htm',
destroy : 'stakeholderTypeDelete.htm'
},
reader : jsonReader,
writer : jsonWriter
});

Do you have really tired of finding a well suited and speedy UI framework?

Then what about extjs 4.0.x???
It's a powerful framework with RESTful support.
Just try it..

http://edspencer.net/

What if distributed web application is deployed in container under multiple jvms when a client request is recieved?

Is it creating threads from each jvm for a one request?????


it's simple.... there u will be created multiple threads from each jvm but still there have only one servlet instance for the container. Are you sure this answer???
No problem if I am wrong becos u r the job finder..pls. google this now it self.

Let's try to build scrum masters/project managers/software architects/even a company with training AI models

The concept: The basic concept is to build trained AI model for each role separately in scalable fashion within a private cloud. As an examp...