PDA

View Full Version : modal Update, delete records on grid panel J2EE



Unlucky
14 Dec 2011, 6:25 AM
i used extjs4, J2EE: EJB3.0, server Jboss 5.1.

My js:


Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'libExtJS/js/ux'); // set path for checkcolumns


Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.panel.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.ux.grid.FiltersFeature'
]);
// define fillter


Ext.onReady(function(){
var url = {
remote: 'showAllEvent'
};
var updateForm;
var grid;
var rid ;
var rname;
var rpost;
var rsrg;
var rerg;
var rsd;
var red;
var rmp;
var rpr;
var rdes;
var rstt;
var rimg;
var filters = {
ftype: 'filters',

filters: [{
type: 'numeric',
dataIndex: 'eventid'
}, {
type: 'string',
dataIndex: 'ename'
}, {
type: 'numeric',
dataIndex: 'minpart'
}, {
type: 'date',
dataIndex: 'startregdate'
},
{
type: 'date',
dataIndex: 'endregdate'
},
{
type: 'date',
dataIndex: 'startdate'
},
{
type: 'date',
dataIndex: 'enddate'
},
{
type: 'date',
dataIndex: 'postdate'
},
{
type: 'string',
dataIndex: 'prize'
}, {
type: 'boolean',
dataIndex: 'status'
}]
};
// create the data store
var store = Ext.create('Ext.data.Store',{
remoteSort: true,
storeId: 'myStore',
idProperty: 'eventid',
pageSize: 10,
sorters: [{
property: 'eventid',
direction: 'ASC'
}],
fields: [
{
name: 'eventid',
type:'int'
},
{
name:'image',
type:'string'
},


{
name:'ename',
type: 'string'
},


{
name:'startregdate',
type: 'date',
dateFormat:'c'


},
{
name:'endregdate',
type: 'date',
dateFormat:'c'
},
{
name:'startdate',
type: 'date',
dateFormat:'c'
}
,
{
name:'enddate',
type: 'date',
dateFormat:'c'
}
,
{
name: 'minpart',
type: 'int'
},
{
name:'prize',
type:'string'
},
{
name:'description',
type:'string'
},


{
name: 'status',
type:'bool'
},


{
name:'postdate',
type: 'date',
dateFormat:'c'
}
],
proxy: {
type: 'ajax',
url: url.remote,
reader: {
type: 'json',
root: 'Events',
totalProperty: 'totalCount'
}
}
});


function status_img(v) {
if (v == true) return "<img width='50' height='20' src='libExtJS/images/icon_active.png'></img>";
if (v == false) return "<img width='50' height='20' src='libExtJS/images/icon_blocked.png'></img>";
}
// define link image
function event_img(val){
return "<img width='110' height='90' src='../Resource/"+val+"'></img>";
}
function stt_check(val){
if(val==true){
return
}
if(val==false){


}
}
// create the Grid
grid = Ext.create('Ext.grid.Panel', {
title: 'List Event',
id: 'eventPanel',
features: [filters],
columnLines: true,
loadMask:true,
store: store,
// create menu bar edit, block
tbar: [
{
itemId: 'editEvent',
text: 'Edit Event',
iconCls: 'icon_update',
handler :
showUpdateForm
,
disabled: true // non click = disable
},


{
itemId: 'blockEvent',
text: 'Block Event',
iconCls: 'icon_block',
handler: function() {
Ext.MessageBox.show({
title:'Confirm Block?',
msg: 'Are you sure to block this Event?',
buttons: Ext.MessageBox.YESNO,
fn: function(btn) {
if (btn == 'yes') {
var record = grid.getSelectionModel().selected.items[0];
rid = record.data.eventid;
Ext.Ajax.request({
url:'blockEvent',
method: 'POST',
params: {
eID: record.data.eventid
},
success: function() {
store.load();
}
});
}
}
});


},
disabled: true
}],
// listener for toolbar edit, block
listeners: {
selectionchange: function(model, records) { // click, change row endable
grid.down('#blockEvent').setDisabled(!records.length);
grid.down('#editEvent').setDisabled(!records.length);

},
itemclick : function() {
var record = grid.getSelectionModel().selected.items[0];
rid = record.data.eventid;
rname = record.data.ename;
rpost = record.data.postdate;
rsrg = record.data.startregdate;
rerg = record.data.endregdate;
rsd = record.data.startdate;
red = record.data.enddate;
rmp = record.data.minpart;
rpr = record.data.prize;
rdes = record.data.description;
rstt = record.data.status;
rimg = record.data.image;


// rid = record.get('eventid');
// rname = record.get('ename');
// rpost = record.get('postdate');
// rsrg = record.get('startregdate');
// rerg = record.get('endregdate');
// rsd = record.get('startdate');
// red = record.get('enddate');
// rmp = record.get('minpart');
// rpr = record.get('prize');
// rdes = record.get('description');
// rstt = record.get('status');
// rimg = record.get('image');
}
},
// define columns
columns: [{
id: 'eid',
header: "ID",
width: 30,
dataIndex: 'eventid',
align: 'center',
filterable: true
},
{
header: "Active?",
width: 65,
dataIndex: 'status',
// xtype: 'checkcolumn',
renderer: status_img,
align: 'center',
filter: {
}
},
{
header: "Image",
width: 125,
dataIndex: 'image',
renderer: event_img,
align: 'center',
filter: {
disabled: true
}
},
{
id: 'ename',
header: "Event Name",
width: 80,
dataIndex: 'ename',
align: 'center',
filter: {
}
},
{
header: "Start Registration",
width: 100,
dataIndex: 'startregdate',
renderer : Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center',
filter: {
}
},
{
header: "End Registration",
width: 100,
dataIndex: 'endregdate',
renderer : Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center',
filter: {
}
},
{
header: "Start Date",
width: 90,
dataIndex: 'startdate',
renderer : Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center',
filter: {
}
}
,{
header: "End Date",
width: 90,
dataIndex: 'enddate',
renderer: Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center',
filter: {
}
},
{
header: "Min Participants",
width: 100,
dataIndex: 'minpart',
align: 'center',
filter: {
}
},
{
header: "Prize",
width: 60,
dataIndex: 'prize',
align: 'center',
filter: {
}
},
{
header: "Description",
width: 90,
dataIndex: 'description',
align: 'center',
filter: {
diabled: true
}
},
{
header: "Post Date",
width: 100,
dataIndex: 'postdate',
renderer: Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center',
filter: {
}
}],
viewConfig: {
forceFit: true
},
// stripeRows: true,
height:420,
width:700,
frame:true,
// define bottom bar
bbar: Ext.create('Ext.PagingToolbar', {
//pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying events {0} - {1} of {2}',
emptyMsg: "No events to display"
})
});
// create clear fillter
grid.child('[dock=bottom]').add([
'->',
{
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
}
]);
// show
grid.render('event-list');
// load data
store.load({
params:{
start:0,
limit:10
}
});
Ext.apply(Ext.form.field.VTypes, {


daterange: function(val, field) {
var date = field.parseDate(val);


if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
// end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
},


daterangeText: 'Start date must be less than end date',


image: function(v){
return /\.(jpg|png|bmp|jpeg|png)$/.test(v);
},
imageText:'Image upload only jpg,png,bmp,jpeg,png.'


});
/// define form update modal
var win;
function showUpdateForm() {


if (!win) {
updateForm = Ext.widget('form', {


bodyPadding: '10 10 0',
frame: true,
width: 500,
defaults: {
// margins: '0 0 10 0',
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 120,


labelStyle: 'font-weight:bold'
},
items: [
{
xtype: 'textfield',
name : 'eventid',
fieldLabel: 'Event ID',
disabled: true,
id:'eventid'
},
{
xtype: 'textfield',
name : 'ename',
fieldLabel: 'Event Name',
id:'ename'
},
{
fieldLabel: 'Post Date',
xtype: 'datefield',
name: 'postdate',
id: 'postdate',
// maxValue: Ext.Date.format(new Date(), 'm/d/Y'),
// minValue: Ext.Date.format(new Date(), 'm/d/Y'),
vtype: 'daterange',
endDateField: 'startregdate'
}
,
{
xtype: 'datefield',
fieldLabel: 'Begin Registration',
name: 'startregdate',
id: 'startregdate',
vtype: 'daterange',
startDateField:'postdate',
endDateField: 'endregdate'
},
{
xtype: 'datefield',
fieldLabel: 'End Registration',
name: 'endregdate',
id: 'endregdate',
vtype: 'daterange',
endDateField:'startdate',
startDateField: 'startregdate'


},
{
xtype: 'datefield',
fieldLabel: 'Start Date',
name: 'startdate',
id: 'startdate',
vtype: 'daterange',
startDateField: 'endregdt',
endDateField:'enddate'
},
{
xtype: 'datefield',
fieldLabel: 'End Date',
name: 'enddate',
id: 'enddate',
vtype: 'daterange',
startDateField: 'startdate'
},
{
xtype: 'numberfield',
fieldLabel: 'Min Participants',
name: 'minpart',
id:'minpart',
value: 1,
minValue: 1
},
{
xtype: 'textareafield',
fieldLabel: 'Prize',
name: 'prize',
id:'prize'
},
{
xtype:'checkbox',
fieldLabel: 'Publish',
boxLabel: 'Publish',
name: 'status',
inputValue: 'Active',
id: 'status'
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'desciption',
id: 'desciption'
},
{
xtype: 'filefield',
id: 'image',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'image',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
},
vtype:'image'
}],
buttons: [{
text: 'Save',
handler: function(){
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'insertEvent',
waitMsg: 'Inserting event...',
success: function(fp, o) {
msg('Success','Add New Event Success');
this.up('window').hide();
this.up('form').getForm().reset();
},
failure: function(form, action) {
msg('Error','Process data failed');
}
});
}
}
},{
text: 'Close',
handler: function() {
this.up('window').hide();
this.up('form').getForm().reset();
}
}]
});
win = Ext.widget('window', {
title: 'Edit Event',
closeAction: 'hide',
width: 510,
height: 500,
minHeight: 500,
layout: 'fit',
resizable: true,
modal: true,
items: updateForm
});
}
win.show();


// define data form
var idComponent = updateForm.getComponent('eventid');
var nameComponent = updateForm.getComponent('ename');
var postComponent = updateForm.getComponent('postdate');
var srgComponent = updateForm.getComponent('startregdate');
var ergComponent = updateForm.getComponent('endregdate');
var edComponent = updateForm.getComponent('enddate');
var sdComponent = updateForm.getComponent('startdate');
var mpComponent = updateForm.getComponent('minpart');
var prComponent = updateForm.getComponent('prize');
var desComponent = updateForm.getComponent('desciption');
var sttComponent = updateForm.getComponent('status');
var imgComponent = updateForm.getComponent('image');
// set data form
idComponent.setValue(rid);
nameComponent.setValue(rname);
postComponent.setValue(rpost);
srgComponent.setValue(rsrg);
ergComponent.setValue(rerg);
sdComponent.setValue(rsd);
edComponent.setValue(red);
mpComponent.setValue(rmp);
prComponent.setValue(rpr);
desComponent.setValue(rdes);
sttComponent.setValue(rstt);
imgComponent.setValue(rimg);
}


});

my servlet :



/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package servlet.bp;


import entity.bp.Event;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import ssbean.bp.BluePumpkinSSBLocal;


/**
*
* @author ADMIN
*/
public class showAllEvent extends HttpServlet {


public showAllEvent() {
super();
}


/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}


// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
Context context = new InitialContext();
Object obj = context.lookup("BluePumpkinSSBLocalJNDI");
BluePumpkinSSBLocal local = (BluePumpkinSSBLocal) obj;
ArrayList<Event> listEvent = (ArrayList) local.showAllEvent();
StringBuilder sb = new StringBuilder();
sb.append("{\"totalCount\":\"10\",\"Events\":[");
for (int i = 0; i < listEvent.size(); i++) {
sb.append("{");
sb.append("\"eventid\":" + "\"" + listEvent.get(i).getEventID() + "\"");
sb.append(",\"image\":" + "\"" + listEvent.get(i).getPicture() + "\"");
sb.append(",\"ename\":" + "\"" + listEvent.get(i).getEventName() + "\"");
sb.append(",\"startregdate\":" + "\"" + listEvent.get(i).getBeginRegisterDate() + "\"");
sb.append(",\"endregdate\":" + "\"" + listEvent.get(i).getEndRegisterDate() + "\"");
sb.append(",\"startdate\":" + "\"" + listEvent.get(i).getStartDate() + "\"");
sb.append(",\"enddate\":" + "\"" + listEvent.get(i).getEndDate() + "\"");
sb.append(",\"minpart\":" + "\"" + listEvent.get(i).getMinParticipants() + "\"");
sb.append(",\"prize\":" + "\"" + listEvent.get(i).getPrize() + "\"");
sb.append(",\"description\":" + "\"" + listEvent.get(i).getDescription() + "\"");
sb.append(",\"status\":" + "\"" + listEvent.get(i).getStatus() + "\"");
sb.append(",\"postdate\":" + "\"" + listEvent.get(i).getPostDate() + "\"");
sb.append("},");
}
String json = sb.substring(0, sb.length() - 1);
json += "]}";
out.println(json);
out.close();
} catch (Exception e) {
e.printStackTrace();
}


}


/**
* Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);


}


/**
* Returns a short description of the servlet.
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}



My String SQL : Select * from Events

you can see web app follow link :
http://i.imgur.com/InuZ5.png
http://i.imgur.com/WNDRR.png
http://i.imgur.com/7p5Hn.png

i have 3 big troubles:
1. Can't limit records on grid let paging
2. Can't fillter data.
3. if i choosed 3 record bind to form. and then i select next record :
just Id, name change, and filelds postdate, startdate... duplicate data record's before.

Any one have ideas?

sorry if my English bad.

mitchellsimoens
15 Dec 2011, 2:00 PM
ideas about changing the backend to support paging and filtering?