Created
July 30, 2014 06:33
-
-
Save xkeshav/f3e80d48d1d4984c2622 to your computer and use it in GitHub Desktop.
extjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ext.BLANK_IMAGE_URL = './extjs/resources/images/default/s.gif'; | |
MyApp = {}; | |
// get Context of the current location | |
// First we look for the tag <base> from HTML | |
// and if tag is not then look for the URL then | |
// @return parent location of the current file including `/` | |
MyApp.getContext = function() { | |
var base = document.getElementsByTagName('base')[0]; | |
if (base && base.href && (base.href.length > 0)) { | |
base = base.href; | |
} else { | |
base = document.URL; | |
} | |
var li = base.lastIndexOf("/") + 1; | |
return base.substr(0, li); | |
}; | |
var proxy = new Ext.data.HttpProxy({ | |
type: 'json', // optional | |
url: MyApp.getContext() + '/json.php' | |
}); | |
// incomings records are in the format {"data":[{"id":,"name":"","email":""},..]} | |
var contactRecord = Ext.data.Record.create([ | |
{ name: 'ID', type: 'int', mapping: 'id' }, | |
{ name: 'Email', type: 'string', mapping: 'email'}, | |
{ name: 'Name', type: 'string', mapping: 'name', allowBlank: true}, | |
{ name: 'Click', type: 'int', mapping: 'click', allowBlank: true}, | |
{ name: 'Open', type: 'int', mapping: 'open', allowBlank: true} | |
// { name: 'Status', type: 'int', mapping: 'NumClicks', allowBlank: true} | |
]); | |
var reader = new Ext.data.JsonReader({ | |
idProperty: 'ID', | |
totalProperty: 'totalCount', | |
successProperty: 'success', | |
root: 'data', | |
messageProperty: 'message', | |
fields: contactRecord | |
}); | |
var writer = new Ext.data.JsonWriter({ | |
encode: false, | |
listful: false, | |
writeAllFields: false, | |
// xmlEncoding: "UTF-8" // if we set xmlWriter instead of JsonWriter | |
}); | |
Ext.onReady(function() { | |
// Typical Store collecting the Proxy, Reader and Writer together. | |
var dataSourceStore = new Ext.data.ArrayStore({ | |
autoDestroy: true, | |
storeId: 'dataSourceStore', | |
idIndex: 0, | |
fields: ['id','name'], | |
data: [ | |
[1, 'Dotmailer'], | |
[2, 'Address Book'] | |
] | |
}); | |
var campaignStore = new Ext.data.Store({ | |
autoDestroy: true, | |
autoload: false, | |
remoteSort: false, | |
storeId: 'campaignStore', | |
restful: true, | |
proxy: proxy, | |
reader: reader, | |
writer: writer, | |
}); | |
var contactStore = new Ext.data.Store({ | |
autoDestroy: true, | |
autoload: false, | |
remoteSort: true, | |
storeId: 'contactStore', | |
restful: true, | |
proxy: proxy, | |
reader: reader, | |
baseParams: { | |
'type': 'contact' | |
}, | |
// sortInfo: { | |
// field: 'Email', | |
// direction: 'ASC' | |
// }, | |
writer: writer, | |
}); | |
var activityStore = new Ext.data.ArrayStore({ | |
autoDestroy: true, | |
storeId: 'activityStore', | |
idIndex: 0, | |
fields: ['id','name'], | |
data: [ | |
[2, 'Clicked'], | |
[1, 'Opened'], | |
[3, 'Not Opened'], | |
[4, 'Not Clicked'] | |
] | |
}); | |
var dataCombox = new Ext.form.ComboBox({ | |
fieldLabel: 'Select Data Source', | |
displayField: 'name', | |
valueField: 'id', | |
id: 'datasourceID', | |
typeAhead: true, | |
triggerAction: 'all', | |
width: 200, | |
forceSelection: true, | |
allowBlank: true, | |
store: dataSourceStore, | |
mode: 'local', | |
listeners: { | |
// scope: this, | |
select: function () { | |
if(1 === this.getValue()) { | |
campaignStore.load({ | |
params: { | |
type: 'campaign' | |
} | |
}); | |
} | |
} | |
} | |
}); | |
// create combo boxes | |
var campaignCombox = new Ext.form.ComboBox({ | |
fieldLabel: 'Campaign', | |
id: 'campaign', | |
store: campaignStore, | |
name: 'Name', | |
displayField: 'Name', | |
valueField: 'ID', | |
emptyText: 'Choose Campaign', | |
typeAhead: true, | |
editable: false, | |
anchor: '70%', | |
allowBlank: false, | |
listClass: 'comboalign', | |
forceSelection: true, | |
selectOnFocus: true, | |
triggerAction: 'all', | |
mode: 'local', | |
//if set mode 'remote' then below will works | |
loadingText: 'Loading campaigns...', | |
queryMode: 'remote', | |
queryParam: 'type', | |
allQuery: 'campaign', | |
lastQuery: '', | |
listeners: { | |
// scope: this, | |
// change: function(t,n,o){ console.log(n + o); }, | |
// beforequery: function(q){ | |
// console.log(q.combo.lastQuery); | |
// }, | |
select: {fn: filterContact, scope:this} | |
} | |
}); | |
// add HTML selectbox in Ext comboBox with help of `transfrom` property | |
var activityCombox = new Ext.form.ComboBox({ | |
fieldLabel: 'Contact who', | |
displayField :'name', | |
valueField: 'id', | |
id: 'activityID', | |
typeAhead: true, | |
triggerAction: 'all', | |
width: 150, | |
forceSelection: true, | |
allowBlank: true, | |
store: activityStore, | |
mode: 'local', | |
listeners: { | |
// scope: this, | |
select: { fn: filterContact, scope: this } | |
} | |
}); | |
// To invoke firstcombox to fetch contacts , | |
// we can do this in 2 manners | |
// 1. Invoking `on` method | |
// campaignCombox.on('select', function(cb,r,i) { | |
// console.log(r.get('ID') + ' clicked'); | |
// }, this); | |
// | |
// 2. Invoking the function name written on 'select' property of combox | |
function filterContact() { | |
console.log('here inside filter Contact function'); | |
var campID = campaignCombox.getValue(); | |
var activityID = activityCombox.getValue(); | |
console.log(activityID); | |
contactStore.removeAll(); | |
contactStore.load({ | |
params: { | |
campaignID: campID, | |
activityID: activityID //record.get('ID') | |
} | |
}); | |
} | |
/* | |
if we want to show data in grid (columns and all ) instead of combo box ( like above), then we will use GridPanel method in below | |
*/ | |
// var sm = Ext.create('Ext.selection.CheckboxModel'); | |
var cbxSelModel = new Ext.grid.CheckboxSelectionModel({ | |
checkOnly: false, | |
singleSelect: false, | |
sortable: false, | |
dataIndex: 'visible', | |
width: 20, | |
grid: 'grid', | |
}); | |
// The following is necessary to map the Record Fields to the grid columns. | |
var userColumns = [ | |
cbxSelModel, | |
{ | |
header: "ID", | |
width: 70, | |
dataIndex: 'ID', | |
sortable: true | |
}, { | |
header: "Name", | |
width: 100, | |
dataIndex: 'Name', | |
sortable: true, | |
hidden: true | |
}, { | |
header: "Email", | |
width: 200, | |
dataIndex: 'Email', | |
sortable: true | |
}, { | |
header: "Clicked", | |
width: 80, | |
dataIndex: 'Click', | |
sortable: true | |
}, { | |
header: "Opened", | |
width: 80, | |
dataIndex: 'Open', | |
sortable: true | |
} | |
]; | |
/* | |
Below we show data in grid panel using new Ext.grid.GridPanel({ ... }) | |
by un commenting `renderTo` will show this panel on page in given div ID 'rest-grid' | |
*/ | |
// var sm = Ext.create('Ext.selection.CheckboxModel'); | |
var grid = new Ext.grid.GridPanel({ | |
store: contactStore, | |
columns: userColumns, | |
// renderTo:'contactGrid', | |
width: 'fit', | |
height: 300, | |
iconCls: 'icon-grid', | |
frame: true, | |
// title: 'Choose Contacts', | |
enableColumnHide: true, | |
// items : [campaignCombox, activityCombox ,contactCombox ], | |
// viewConfig: { | |
// forceFit: true | |
// } | |
}); | |
// we are using Ext.Panel here, if we use `Ext.Window({...})` , then it will draw window on page | |
var panel = new Ext.form.FormPanel({ // or Ext.form.FormPanel | |
// title: 'Choose Contacts', | |
layout: 'form', | |
labelAlign: 'left', | |
defaultType: 'textfield', | |
width: 600, | |
height: 500, | |
padding: 10, | |
items: [ | |
dataCombox, | |
campaignCombox, | |
activityCombox, | |
{ | |
fieldLabel: 'Atleast', | |
name: 'atleast', | |
allowBlank: true, | |
labelSeparator: '' | |
}, | |
// { | |
// fieldLabel: 'Email', | |
// name: 'email', | |
// vtype:'email' | |
// }, | |
grid], | |
renderTo: Ext.getBody() // document.body or Ext.getBody() | |
}); | |
}); // end of Ext.onReady(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ExtJS practice with group office