MAKING EXT JS FORM

HIII

MAKING FORM IN EXT JS OF CRUD OPERATION.

CODE IS AS FOLLOWS

SHOWTASKGRID FUNCTION MAKES THE GRIDPANEL WHICH USES STORE OR RECORDSET IS SIMPLEDATASTORE, SHOW THE COLOUMN MODEL USES THE ROW SELECTION MODEL FOR SHOWING THE UPDATE FORM AND DOING THE DELETE OPERATION , IN FBAR I HAVE GIVEN THE BUTTONS FOR ADD UPDATE ,REFRESH, CLEAR GROUPING AND FOR LOGOUT ,I HAVE GIVEN FUNCTIO FOR DELETERECORD WHICH IS USED FOR DELETED THE RECORD AND MAKE NEW EXT.WINDOW AND ASSING THE GRID VARIABLE IN THE ITEMS OF WINDOW ... BY THIS GRID WILL BE SHOWN IN THE WINDOW....



function showtaskgrid(){
var grid = new xg.GridPanel({
store: SimpleDataStore,
columns: [
{header: "Id", width: 10, sortable: true, dataIndex: 'id'},
{header: "Customer", width: 20, sortable: true, dataIndex: 'customer'},
{header: "Project", width: 20, sortable: true, dataIndex: 'project'},
{header: "Assigned To", width: 20, sortable: true, dataIndex: 'employee'},
{header: "Task", width: 20, sortable: true, dataIndex: 'task'},
{header: "Due Date", width: 20, sortable: true, dataIndex: 'duedate', renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Hands on Hrs", width: 20, sortable: true, dataIndex: 'handsonhours'},
{header: "Comments", width: 20, sortable: true, dataIndex: 'comment'},
{header: "Completed On", width: 20, sortable: true, dataIndex: 'completiondate', renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Days Left ", width: 20, sortable: true, dataIndex: 'dayleft'},
{header: "Buffer Hours", width: 20, sortable: true, dataIndex: 'buffhours',renderer:renderbuffhours}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
/* addTab();
Ext.getCmp("task").getForm().loadRecord(rec);*/
}
}
}),
listeners: {
viewready: function(g) {
g.getSelectionModel().selectRow(0);
} // Allow rows to be rendered.
},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds) {
var xf = Ext.util.Format;
p.body = '

' + xf.ellipsis(xf.stripTags(record.data.comment), 200) + '

';
return 'x-grid3-row-expanded';
}
},
view: new Ext.grid.GroupingView({
forceFit:true,

groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),


plugins: filters,
frame:true,
width: 1000,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Listing of Task',

iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
SimpleDataStore.clearGrouping();
}
},'-', {
text:'Add Task',
iconCls: 'icon-clear-group',
handler : function(){
addTab();

}
},'-', {
text:'Refresh',
iconCls: 'icon-clear-group',
handler : function(){
grid.getStore().removeAll();
grid.getStore().load();

}
},'-', {
text:'Update',
iconCls: 'icon-clear-group',
handler : function(){
var selectedKeys = grid.selModel.selections.keys;
if(selectedKeys.length > 0)
{
addTab();
var rec = grid.getSelectionModel().getSelected();

Ext.getCmp("task").getForm().loadRecord(rec);
}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}

}
},'-', {
text:'Delete',
iconCls: 'icon-clear-group',
handler : function(){
var selectedKeys = grid.selModel.selections.keys;
if(selectedKeys.length > 0)
{
Ext.MessageBox.confirm('Message','Do you really want to delete selection?', deleteRecord);
}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}

}
},'-', {
text:'Log Out',
iconCls: 'add16',
handler : function(){
Ext.Ajax.request({
url:'logout.php',
success:function(){window.location='index.php';},
failure:function(){window.location='index.php';},
});

}
}
]
});
function deleteRecord(btn) {
if(btn=='yes')
{

//returns record objects for selected rows (all info for row)
var selectedRows = grid.selModel.selections.items;

//returns array of selected rows ids only
var selectedKeys = grid.selModel.selections.keys;

//note we already did an if(selectedKeys) to get here

//encode array into json
var encoded_keys = Ext.encode(selectedKeys);
//submit to server
Ext.Ajax.request( //alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
{ //specify options (note success/failure below that receives these same options)
waitMsg: 'Saving changes...',
//url where to send request (url to server side script)
url: 'deletetask.php',

//params will be available via $_POST or $_REQUEST:
params: {
task: "delete", //pass task to do to the server script
companyID: selectedKeys//the unique id(s)

},

/**
* You can also specify a callback (instead of or in
* addition to success/failure) for custom handling.
* If you have success/failure defined, those will
* fire before 'callback'. This callback will fire
* regardless of success or failure.*/
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.alert('OK','record deleted');//you won't see this alert if the next one pops up fast
var json = Ext.util.JSON.decode(response.responseText);

//need to move this to an after event because
//it will fire before the grid is re-rendered
//(while the deleted row(s) are still there
Ext.MessageBox.alert('OK', ' record(s) deleted.');

//You could update an element on your page with
//the result from the server
//(e.g.

)
//var total = Ext.get('total');
//total.update(json.sum);

} else{
Ext.MessageBox.alert('Sorry, please try again. [Q304]',response.responseText);
}
},

//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.alert('Warning','Oops...');
//ds.rejectChanges();//undo any changes
},
success:function(response,options){
//Ext.MessageBox.alert('Success','Yeah...');
//commit changes and remove the red triangle which
//indicates a 'dirty' field
grid.getStore().removeAll();
grid.getStore().load();
}
} //end Ajax request config
);// end Ajax request initialization
};//end if click 'yes' on button
}; // end deleteRecord
SimpleDataStore.load();

var wingrid = new Ext.Window({
title: 'Task Manager',
id:Ext.id(),
closable:false,
width:1200,
height:700,
minWidth: 300,
minHeight: 200,
//border:false,
layout:'fit',

items: grid
});
wingrid.show(this);
}

FOR MAKING THE GROUPING STORE IN EXTJS I HAVE USED THE FOLLOWING CODE

var SimpleDataStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'tasklist.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({

},
[
//this is field in database
{name: 'id', type: 'numeric'},
{name: 'customer', type: 'string'},
{name: 'project', type: 'string'},
{name: 'employee', type: 'string'},
{name: 'task', type: 'string'},
{name: 'duedate', type: 'date'},
{name: 'handsonhours', type: 'numeric'},
{name: 'completiondate', type: 'date'},
{name: 'comment', type: 'string'},
{name: 'dayleft', type: 'string'},
{name: 'buffhours', type: 'string'}

]),
sortInfo:{field: 'customer', direction: "ASC"},
groupField:'customer' // this script used to classify by country
});

FOR GIVING FILTER TO THE GRID USED THE FOLLOWING CODE....


var filters = new Ext.ux.grid.GridFilters({
local:true,
filters:[
{type: 'numeric', dataIndex: 'id',store: SimpleDataStore},
{type: 'string', dataIndex: 'customer',store: SimpleDataStore},
{type: 'string', dataIndex: 'project'},
{type: 'string', dataIndex: 'employee'},
{ type: 'string',dataIndex: 'task'},
{ type: 'date',dataIndex: 'duedate'},
{ type: 'numeric',dataIndex: 'handsonhours'},
{dataIndex: 'completiondate', type: 'date'},
{dataIndex: 'comment', type: 'string'},
{dataIndex: 'dayleft', type: 'numeric'},
{dataIndex: 'buffhours', type: 'numeric'}
]});

FOR OPENING THE FORM ON CLICK OF THE ADD BUTTON.....

USE THIS FUNCTION.....

function addTab(){
/*data store for project,employee,customer auttosuggest*/
var customer = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'customer.php'
}),
reader: new Ext.data.JsonReader({

},
[{name: 'customer'},
{name: 'customer'}
])
});
customer.load();
var project = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'project.php'
}),
reader: new Ext.data.JsonReader({

},
[{name: 'project'},
{name: 'project'}
])
});
project.load();
var employee = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'employee.php'
}),
reader: new Ext.data.JsonReader({

},
[{name: 'employee'},
{name: 'employee'}
])
});
employee.load();
/* formpanel for form for add edit task*/
var simple = new Ext.FormPanel
({
id:'task',
bodyStyle : "padding: 0px;",
buttonAlign: 'center',
defaults: {anchor: '100%'},
defaultType: 'textfield',
frame : true,
labelAlign : "top",
method: 'post',
style: 'margin: 0px auto',
url: 'savetask.php',
width: 300,
items :
[{
xtype:'combo',
store: customer,
name:'customer',
fieldLabel : "Customer",
displayField: 'customer',
valueField:'customer',
minChars: 1,
typeAhead: false,
mode: 'remote',
forceSelection: false,
triggerAction: 'all',
emptyText: 'Select a customer...',
selectOnFocus: true

},{
xtype:'combo',
store: project,
name:'project',
fieldLabel : "Project",
displayField: 'project',
valueField:'project',
minChars: 1,
typeAhead: false,
mode: 'remote',
forceSelection: false,
triggerAction: 'all',
emptyText: 'Select a project...',
selectOnFocus: true
},{
xtype:'combo',
store: employee,
name:'employee',
fieldLabel : "Employee",
displayField: 'employee',
valueField:'employee',
minChars: 1,
typeAhead: false,
mode: 'remote',
forceSelection: false,
triggerAction: 'all',
emptyText: 'Select a employee...',
selectOnFocus: true
},{
xtype : "textarea",
name : "task",
fieldLabel : "Task",
height : 50,
},

{
xtype : "hidden",
name : "id",
fieldLabel : "id",
height : 0,
}
,

new Ext.form.DateField({
fieldLabel: 'Due Date',
name: 'duedate',
allowBlank: false,
width:190
}),
{
name : "handsonhours",
fieldLabel : "Hand On Hours"
} ,{
xtype : "textarea",
name : "comment",
fieldLabel : "Comment",
height : 50,
},
new Ext.form.DateField({
fieldLabel: 'Completion Date',
name: 'completiondate',
width:190
})



],

});
/* window for form for add edit task*/
if(!win){
var win = new Ext.Window({
title: 'Add Task',
id:Ext.id(),
closable:true,
width:500,
height:550,
minWidth: 300,
minHeight: 200,
//border:false,
layout:'fit',
plain:true,
items: simple,
buttons:
[{
text: 'Reset',
handler: function(){simple.getForm().reset()}
},{
text: 'Submit',
handler: function()
{
simple.getForm().submit
({
success: function(form, action) {

Ext.Msg.alert('Success', action.result.msg);
grid.getStore().removeAll();
grid.getStore().load();
win.hide();
},

failure: function(form, action) {
Ext.Msg.alert('Failure', action.result.msg);
win.hide();
}
});
}
}]

});
}
win.show(this);
}
IN THIS FUNCTION FIRST I HAVE MAKE THREE DATA STORE FOR CUSTOMER,PROJECT,EMPLOYEE AUTO SUGGEST COMBO BOX IN THIS I WAS GETTING THE PROBLEM OF NOT GETTING THE DATA ON TYPING IN THE TEXT BOX THAN THROUGH SOME BLOG I GOT THE IDEA OF POSTING OF QUERY IN THE VALUE OF TEXT BOXT I GOT THAT IN THE POST VARIABLE THAN I QUERY WITH THAT POST VARIABLE WITH LIKE THAN MY PROBLEM IS SOLVED , THE CODOR HELPED ME IN SOLVING THIS PROBLEM THANKS TO HIM..

AFTER MAKING THIS AUTO SUGGEST I MAKED THE FORM PANEL IN WHICH ALL TEXT BOX AND AUTOSUGGEST I PUT THAN I MAKED NEW WINDOW AND ASSIGNED THE FORM SIMPLE VARIBLE TO WINDOW AND SHOWED IT ........

I HAVE MADED THE LOGIN LOGOUT FORM IN EXTJS IN THAT I GOT THE PROBLEM OF SESSION VARIBLE THAN I PUT THE ACTION ON LOGIN
IS WINDOW.LOCATION TO ANOTHER PAGE THAN I GOT THE SESSION VARIABLE STOARGE

THANKS


RAHUL