Ext.onReady(function(){
var dialog = new Ext.BasicDialog("grid-dlg", {
modal:true,
width:480,
height:220,
shadow:true,
resizable:false
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
var tpl = new Ext.Template(
'<div class="quote-item">' +
'<h2>{company}</h2>' +
'<img src="logo.jpg" alt="Logo" style="float:right;margin:4px;" />' +
'<label>Price:</label>${price}<br />' +
'<label>Change:</label>{change}<br />' +
'<label>% Change:</label>{pctChange}<br />' +
'<label>last updated:</label>{lastChange}<br />' +
'</div>'
);
tpl.compile();
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
function italic(value){
return '' + value + '';
}
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
loadMask:true
});
grid.on("rowdblclick", function(grid) {
var view=new Ext.View(Ext.get('squote'),tpl,{
store:ds
});
var sel = grid.getSelectionModel().getSelected();
var selIndex = ds.indexOf(sel);
var seldata=sel.data;
seldata.change=change(seldata.change);
seldata.pctChange=pctChange(seldata.pctChange);
seldata.lastChange=Ext.util.Format.date(seldata.lastChange,'m/d/Y');
tpl.overwrite(view.getEl(), seldata);
dialog.show(grid.getView().getRow(selIndex));
});
/*setting up the form */
var searchForm = new Ext.form.Form({
//labelAlign: 'top'
labelWidth: 90
});
searchForm.column(
{width:282,style:'margin-left:10px;margin-top:10px;'}, // precise column sizes or percentages or straight CSS
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
id: 'company',
width:170
}),
new Ext.form.TextField({
fieldLabel: 'Max Price',
name: 'price',
id: 'price',
width:170
}),
new Ext.form.DateField({
fieldLabel: 'Last Updated',
name: 'lastChange',
id: 'lastChange',
width:170,
format:'m/d/Y'
})
);
searchForm.column(
{width:272, style:'margin-left:10px;margin-top:10px;', clear:true}, // apply custom css, clear:true means it is the last column
new Ext.form.TextField({
fieldLabel: 'Max Change',
name: 'change',
id: 'change',
width:170
}),
new Ext.form.TextField({
fieldLabel: 'Max % Change',
name: 'pctChange',
id: 'pctChange',
width:170
})
);
var submit = searchForm.addButton({
text: 'Reset',
//disabled:true,
handler: function(){searchForm.reset();ds.clearFilter();}
});
var submit = searchForm.addButton({
text: 'Search Now',
//disabled:true,
handler: submitSearchForm
});
var codeHTML=new Ext.form.HtmlEditor({
});
codeHTML.setValue(Ext.get('divCode').dom.innerHTML);
var layout = new Ext.BorderLayout('grid-panel',{
north: {
titlebar: true,
title: 'Extended Filter',
collapsedTitle: 'click on the arrows to view filter form ==>',
collapsible:true,
collapsed:true,
//hidden:true,
margins:{left:3,top:3,right:3,bottom:0},
initialSize: 150,
split:true
},
center: {
margins:{left:3,top:0,right:3,bottom:3}
}
});
// make the layout resizable, do before render for better performance
var rz = new Ext.Resizable(layout.getEl(), {
wrap:true,
minHeight:100,
pinned:true,
handles: 'all'
//draggable: true
});
rz.on('resize', function(){
layout.layout();
var size = code.el.getSize();
codeHTML.setSize(size.width,size.height);
});
layout.beginUpdate();
var tab=layout.add('center', new Ext.GridPanel(grid),'Grid');
var code=layout.add('center', new Ext.ContentPanel('inner2','Code'));
//activate Grid-Panel
layout.getRegion('center').showPanel('grid-example');
layout.endUpdate();
tab.setTitle('Grid');
searchForm.render(layout.getRegion('north').bodyEl);
codeHTML.render(code.el);
layout.getRegion('north').on('invalidated',function(){
//do something here
});
//render Grid now
grid.render();
//build Header Toolbar
var gridHead = grid.getView().getHeaderPanel();
gridHead.show();
var tb = new Ext.Toolbar(gridHead);
var filterMenuItems = [
new Ext.menu.CheckItem({
text: 'Company',
checked: true,
group: 'filter',
id: 'company',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: 'Price',
checked: false,
group: 'filter',
id: 'price',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: 'Change',
checked: false,
group: 'filter',
id: 'change',
checkHandler: onFilterItemCheck
}),
new Ext.menu.CheckItem({
text: '% Change',
checked: false,
group: 'filter',
id: 'pctchange',
checkHandler: onFilterItemCheck
})
];
var filterMenu = new Ext.menu.Menu({
id: 'filterMenu',
items: filterMenuItems
});
tb.add({
text: 'filter by ',
tooltip: 'set column for search.',
icon: 'find.png',
cls: 'x-btn-text-icon btn-search-icon',
menu: filterMenu
});
var filterlabel = tb.addDom({
tag: 'div',
id: 'filterlabel',
style:'color:#66a6f9;padding:0 4px;width:60px;text-align:center;'
});
Ext.get('filterlabel').update("[Company]");
var filter = tb.addDom({
tag: 'input',
id: 'sfilter',
type: 'text',
size: 30,
value: '',
style: 'background: #F0F0F9;'
});
var combo = new Ext.ux.form.HistoryClearableComboBox({
emptyText:'searchtext...',
selectOnFocus:true,
resizable:true,
hideClearButton: false,
hideTrigger: false,
typeAhead: true,
triggerAction: 'all'
});
combo.applyTo('sfilter');
combo.on('change', function() { // setup an onkeypress event handler
var filterCol = filterMenuItems.filter(function(element, index, array) {
return element.checked;
})[0].id;
ds.filter(filterCol,combo.getValue());
});
tb.addSeparator();
var records = tb.addDom({
tag: 'div',
id: 'recordslabel',
style: 'float:right;'
});
grid.getSelectionModel().selectFirstRow();
layout.on('layout',function(){
var size = layout.getRegion('center').bodyEl.getSize();
codeHTML.setSize(size.width,size.height-8);
});
function onFilterItemCheck(item, checked){
if(checked) {
Ext.get('filterlabel').update('['+item.text+']');
}
}
function submitSearchForm() {
var fFields=searchForm.getValues();
var search = [];
var reg;
ds.filterBy(function(record,id){
for(var f in fFields){
if(fFields[f]!='') {
if(f=='company') {
reg = new RegExp(fFields[f], "i");
if(!reg.test(record.data[f])) return false;
}
if(f=='price' || f=='change' || f=='pctChange') {
if(record.data[f]>fFields[f]) return false;
}
if(f=='lastChange') {
if(Ext.util.Format.date(record.data[f],'m/d/Y')!=fFields[f]) return false;
}
}
};
return true;
});
}
ds.load();
Ext.get('recordslabel').update(ds.getTotalCount()+' records');
ds.on('datachanged',function(){
Ext.get('recordslabel').update(ds.getCount()+' of '+ds.getTotalCount()+' records');
});
});