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
},
...
...
});
Wednesday, July 27, 2011
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'
});
});
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
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
});
======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/
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.
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.
Subscribe to:
Posts (Atom)
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...
-
Quarkus gRPC Service Implementation from the scratch Requirement In order to produce most reliable, fast and maintainable products we can us...
-
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...
-
Problem Statement: Suppose the Government plans to issue up to $10,000 of Savings Bonds. Four individuals applied for a total of $18,000 of...