Monday, May 31, 2010

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







Monday, May 3, 2010

testing web application

1.check broken link from
http://www.dead-link-checker.com/en/
2.check design all browser testing -every page
3.form submission and flow of dynamic website

a) if admin there then password encryption check

Saturday, May 1, 2010

feed aggreegator in ruby on rails

to fetch the feed to the db
def cfeed
if params[:recache] and params[:secret]=="at123"
cache_feeds
expire_fragment(:controller => 'public', :action => 'index') # next load of index will re-fragment cache
render :text => "Done recaching feeds"
end
end


uses the feed tool gem

# This will replace cached feeds in the DB that have the same URI. Be careful not to tie up the DB connection.
def cache_feeds
puts "Caching feeds... (can be slow)"

feeds = Feed.all.map do |uri|

feed = FeedTools::Feed.open( uri.address )
{ :uri => uri.address, :title => feed.title,
:items => feed.items.map { |item|
{:title => item.title, :published => item.published, :link => item.link,:description=>item.description,:author=>item.author} } }

end
feeds.each { |feed|
new = CachedFeed.find_or_initialize_by_uri( feed[:uri] )
new.parsed_feed = feed
puts feed
new.save!
}
end

and for showing the feeds from db to page..

@f=Feed.find(:all)
@aggregate = read_cache unless read_fragment({})

def read_cache
@fr=@f
@fr.map { |uri|
begin
feed = CachedFeed.find_by_uri( uri.address ).parsed_feed
feed[:items].map { |item| {:feed_title =>feed[:title], :feed_item => item} }
rescue
[] # because there might not be anything cached for some feed(s)
end

} .flatten .sort_by { |item| item[:feed_item][:published] } .reverse
end

and for the view part use the following code


<% cache do %>
<%
lastday = -1
@aggregate.each do |item| %>


<%
mydate = item[:feed_item][:published].getlocal
if mydate.yday != lastday
%>
<%= mydate.strftime("%b %d,%Y" ) %>
<%
lastday = mydate.yday
end
%>


"><%= item[:feed_item][:title] %>


<%=item[:feed_item][:description]%>


<% end %>
<% end %>


this will make your feed agreegator hopefully better..

adding google add to your site

to add google ad to your site use the following code

google custom search add

added the google custom search which search in the particular url..