Code:
/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*
* For application to WordPerfect Professional Theme
*/
Ext.onReady(function()
{
// ----------------
// Set listeners on form fields
// ----------------
Ext.override(Ext.form.Field, {
fireKey : function(e) {
if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
this.fireEvent('specialkey', this, e);
}
else {
this.fireEvent(e.type, this, e);
}
}
, initEvents : function() {
this.el.on("focus", this.onFocus, this);
this.el.on("blur", this.onBlur, this);
this.el.on("keydown", this.fireKey, this);
this.el.on("keypress", this.fireKey, this);
this.el.on("keyup", this.fireKey, this);
this.originalValue = this.getValue();
}
});
Ext.QuickTips.init();
// ----------------
// vars
// ----------------
var ds1; // datasource
var ds2; // datasource
var ds3; // datasource
var grid; // grid component
var xg1 = Ext.grid;
var xg2 = Ext.grid;
var xg3 = Ext.grid;
var expander;
var simple1;
var simple2;
var simple3;
// ----------------
// Create searchform
// ----------------
function createSearchForm()
{
simple1 = new Ext.FormPanel({
width:715,
labelWidth: 60,
frame:true,
title: 'Live search',
bodyStyle:'padding:5px 5px 0',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Search',
name: 'query',
allowBlank:true,
listeners:
{
keyup: function(el,type)
{
var theQuery=el.getValue();
if(theQuery.length != 0) {
ds1.load(
{
params:
{
query: theQuery
}
});
} else {
ds1.load(
{
params:
{
query:"dummy",
show:"all"
}
});
}
}
}
}
]
});
simple1.render("searchWrapper1");
simple2 = new Ext.FormPanel({
width:715,
labelWidth: 60,
frame:true,
title: 'Live search',
bodyStyle:'padding:5px 5px 0',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Search',
name: 'query',
allowBlank:true,
listeners:
{
keyup: function(el,type)
{
var theQuery=el.getValue();
if(theQuery.length != 0) {
ds2.load(
{
params:
{
query: theQuery
}
});
} else {
ds2.load(
{
params:
{
query:"dummy",
show:"all"
}
});
}
}
}
}
]
});
simple2.render("searchWrapper2");
simple3 = new Ext.FormPanel({
width:715,
labelWidth: 60,
frame:true,
title: 'Live search',
bodyStyle:'padding:5px 5px 0',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Search',
name: 'query',
allowBlank:true,
listeners:
{
keyup: function(el,type)
{
var theQuery=el.getValue();
if(theQuery.length != 0) {
ds3.load(
{
params:
{
query: theQuery
}
});
} else {
ds3.load(
{
params:
{
query:"dummy",
show:"all"
}
});
}
}
}
}
]
});
simple3.render("searchWrapper3");
}
// ----------------
// Create datasource
// ----------------
function createDS()
{
ds1 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'livesearch1.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id1',
fields: ['referral_id', 'date_time', 'user_id','firstname','lastname', 'address', 'city', 'state', 'zipcode', 'phone', 'terms_conditions', 'initial_purchase', 'recent_purchase', 'commission_latest', 'commission_total', 'status', 'customer_id', 'actions']
})
});
ds1.load(
{
params:
{
query:"dummy",
show:"all"
}
});
ds2 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'livesearch2.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id2',
fields: ['referral_id', 'date_time', 'user_id','firstname','lastname', 'address', 'city', 'state', 'zipcode', 'phone', 'terms_conditions', 'initial_purchase', 'recent_purchase', 'commission_latest', 'commission_total', 'status', 'customer_id', 'actions']
})
});
ds2.load(
{
params:
{
query:"dummy",
show:"all"
}
});
ds3 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'livesearch3.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id3',
fields: ['referral_id', 'date_time', 'user_id','firstname','lastname', 'address', 'city', 'state', 'zipcode', 'phone', 'terms_conditions', 'initial_purchase', 'recent_purchase', 'commission_latest', 'commission_total', 'status', 'customer_id', 'actions']
})
});
ds3.load(
{
params:
{
query:"dummy",
show:"all"
}
});
}
// ----------------
// Create expander
// ----------------
var expander = new xg1.RowExpander({
tpl : new Ext.Template(
'<div id="expander_columns"><div id="expander_col1">{date_time}<br />Referral ID: {referral_id}</div><div id="expander_col2">{address}<br />{city}, {state} {zipcode}</div><div id="expander_col3">Phone: {phone}</div><div id="expander_col4">Status: {status}</div></div>'
)
});
// ----------------
// Create grid
// ----------------
function createGrid()
{
grid1 = new xg1.GridPanel(
{
id: 'refer_panel1',
store: ds1, // use the datasource
cm: new xg1.ColumnModel(
[
expander,
{id:'lastname',header: "Last Name", width: 310, sortable: true, dataIndex: 'lastname'},
{id:'firstname',header: "First Name", width: 300, sortable: true, dataIndex: 'firstname'},
{id:'actions',header: "Actions", width: 67, sortable: true, dataIndex: 'actions'}
]
),
viewConfig:
{
forceFit:true
},
plugins: expander,
collapsible: true,
animCollapse: false,
width:715,
height:500,
stripeRows:true,
title:'Search results',
iconCls:'icon-grid',
renderTo: "gridWrapper1"
});
grid2 = new xg2.GridPanel(
{
id: 'refer_panel2',
store: ds2, // use the datasource
cm: new xg2.ColumnModel(
[
{id:'lastname',header: "Last Name", width: 310, sortable: true, dataIndex: 'lastname'},
{id:'firstname',header: "First Name", width: 280, sortable: true, dataIndex: 'firstname'},
{id:'Status',header: "<form name='status2' action='https://www.sleepamazing.com/chiropractic/?page_id=201' method='post' onSubmit='return get_popup("https://www.sleepamazing.com/chiropr...e_id=201", "status2", 530, 550)'><input type='hidden' name ='popup' value='true'><a href='javascript:submitform("status2");'>Status</a><input type='submit' name='fakeSubmitButton' style='display: none'/></form>", width: 108, sortable: true, dataIndex: 'status'}
]
),
viewConfig:
{
forceFit:true
},
collapsible: true,
animCollapse: false,
width: 715,
height: 100,
stripeRows:true,
title:'Search results',
iconCls:'icon-grid',
renderTo: "gridWrapper2"
});
grid3 = new xg3.GridPanel(
{
id: 'refer_panel3',
store: ds3, // use the datasource
cm: new xg3.ColumnModel(
[
{id:'lastname',header: "Last Name", width: 155, sortable: true, dataIndex: 'lastname'},
{id:'firstname',header: "First Name", width: 110, sortable: true, dataIndex: 'firstname'},
{id:'recent_purchase',header: "Purchase Date / Time", width: 130, sortable: true, dataIndex: 'recent_purchase'},
{id:'commission_latest',header: "Amount Paid", width: 90, sortable: true, dataIndex: 'commission_latest'},
{id:'commission_total',header: "Total Commissions", width: 115, sortable: true, dataIndex: 'commission_total'},
{id:'status',header: "<form name='status3' action='https://www.sleepamazing.com/chiropractic/?page_id=201' method='post' onSubmit='return get_popup("https://www.sleepamazing.com/chiropr...e_id=201", "status3", 530, 550)'><input type='hidden' name ='popup' value='true'><a href='javascript:submitform("status3");'>Status</a><input type='submit' name='fakeSubmitButton' style='display: none'/></form>", width: 98, sortable: true, dataIndex: 'status'}
]
),
viewConfig:
{
forceFit:true
},
collapsible: true,
animCollapse: false,
width:715,
height:500,
stripeRows:true,
title:'Search results',
iconCls:'icon-grid',
renderTo: "gridWrapper3"
});
}
createDS();
createSearchForm();
createGrid();
});