Code:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'js/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.tip.QuickTipManager',
'Ext.ux.LiveSearchGridPanel'
]);
Ext.onReady(function() {
var itemsPerPage = 50;
/***********************Tree panel***************************/
var storetree = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'RequirementsTree',
actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
reader: {
type: 'json',
root: 'children'
}
}
});
var treePan=Ext.create('Ext.tree.Panel', {
id:'candTree',
renderTo: 'tree',
title: 'Navigation Menu',
width: 300,
height: 420,
useArrows:true,
frame: true,
store:storetree,
});
/***********************Handling tree Events************************************/
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name:'uname',type: 'string'},
{name:'fname',type: 'string'},
{name:'lname',type: 'string'},
{name:'emailid',type: 'string'},
{name:'statename',type: 'string'},
{name:'cityname',type: 'string'},
{name:'countryname',type: 'string'}]
});
var store_company = Ext.create('Ext.data.Store',{
model: 'Company',
remoteSort: true,
pageSize:itemsPerPage,
groupField: 'uname',
proxy: {
type: 'ajax',
url: 'GridServlet',
actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
reader: {
type: 'json',
root: 'device',
totalProperty: 'totalCount'
}
}
});
//Group the candidates according to the clients
var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Client Name:{name}({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
});
var grid_company = Ext.create('Ext.ux.LiveSearchGridPanel', {
store: store_company,
features: [groupingFeature],
id:'x-grid3-row-alt',
remoteSort:false,
columns:[
{
text : 'Client Name',
width : 110,
sortable : true,
dataIndex: 'uname'
},
{
text : 'Requirement',
width : 145,
sortable : true,
dataIndex: 'fname'
},
{
text : 'Name',
width : 110,
sortable : true,
dataIndex: 'lname'
},
{
text : 'Email',
width : 160,
sortable : true,
dataIndex: 'emailid'
},
{
text : 'Phone',
width : 100,
sortable : true,
dataIndex: 'statename'
},
{
text : 'Skills',
width : 180,
sortable : true,
dataIndex: 'cityname'
},
{
text : 'Status',
width : 90,
sortable : true,
dataIndex: 'countryname'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store_company,
pageSize:50,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
id:'candGrid',
height: 450,
width: 900,
title: 'Candidate List',
region:'center',
renderTo: 'grid-company',
viewConfig: {
stripeRows: true
}
});
treePan.getSelectionModel().on('select', function(selectionModel, record, index,options) {
var getid = record.getId('id');
store_company.load({
params: {
start:0,
getid:getid,
limit:itemsPerPage
}
});
});
/****************************Search box for tree panel******************************/
var searchfield = new Ext.form.TextField({
id:'multisite-search-field',
allowBlank: true,
// fieldLabel: 'Search',
emptyText: 'Filter Requirements...',
width: 280,
renderTo: 'search',
listeners: {
change: {
fn: function(p1,p2){
treefilter.searchTree(treePan,searchfield);
}
}
}//listener closed
});
treefilter= {
searchTree: function (treePan, searchfield, property) { // search if a tree component and searchfield (textfield, combo, trigger, etc) are passed as params
if (treePan && searchfield) {
// property is optional - will be set to the 'text' propert of the treeStore record by default
property = property || 'text'
var matches = [] // array of nodes matching the search criteria
var rn = treePan.getRootNode() // root node of the tree
if (searchfield.getRawValue().length == 0) { // if the search field is empty
treePan.collapseAll(); // collapse the tree nodes
return;
}
treePan.expandAll(); // expand all nodes for the the following iterative routines
// iterate over all nodes in the tree in order to evalute them against the search criteria
rn.cascadeBy(function (node) {
var re = new RegExp(searchfield.getRawValue(), "ig"); // the regExp could be modified to allow for case-sensitive, starts with, etc.
if (re.test(node.get(property)) == true && node.isLeaf()) { // if the node matches the search criteria and is a leaf (could be modified to searh non-leaf nodes)
matches.push(node) // add the node to the matches array
}
})
var visibleNodes = [] // array of nodes matching the search criteria + each parent non-leaf node up to root
Ext.each(matches, function (item, i, arr) { // loop through all matching leaf nodes
rn.cascadeBy(function (node) { // find each parent node containing the node from the matches array
if (node.contains(item) == true) {
visibleNodes.push(node) // if it's an ancestor of the evaluated node add it to the visibleNodes array
}
})
visibleNodes.push(item) // also add the evaluated node itself to the visibleNodes array
})
rn.cascadeBy(function (node) { // final loop to hide/show each node
var viewNode = Ext.fly(treePan.getView().getNode(node)); // get the dom element assocaited with each node
if (viewNode) { // the first one is undefined ? escape it with a conditional
viewNode.setVisibilityMode(Ext.Element.DISPLAY); // set the visibility mode of the dom node to display (vs offsets)
if (Ext.Array.contains(visibleNodes, node)) { // if the the dom node evaluated is contained in the visibleNodes array
viewNode.show() // then hide show it
}
else {
viewNode.hide() // else, hide it
}
}
})
}
}
}
/***********To get the Email ids from the grid**************/
var emailbtn = new Ext.Button({
text : 'Send Email',
renderTo:'button',
listeners:{
click:{
fn:function(){
var emailAddress = new Array();
for(var i=0; i< store_company.getCount(); i++){
emailAddress.push(store_company.getAt(i).get('emailid'));
}
window.alert(emailAddress); //This prints the email ids.
}
}
}
});
});
Code:
Ext.require([
'Ext.form.*',
'Ext.layout.container.Absolute',
'Ext.window.Window'
]);
Ext.onReady(function() {
var sendEmailForm = Ext.create('Ext.form.Panel', {
layout: 'absolute',
url: 'EmailServlet',
defaultType: 'textfield',
border: false,
items: [{
fieldLabel: 'Send To',
fieldWidth: 60,
msgTarget: 'side',
allowBlank: false,
x: 5,
y: 5,
name: 'to',
anchor: '-5' // anchor width by percentage
}, {
fieldLabel: 'Subject',
fieldWidth: 60,
x: 5,
y: 35,
name: 'subject',
anchor: '-5' // anchor width by percentage
}, {
x:5,
y: 65,
xtype: 'textarea',
style: 'margin:0',
hideLabel: true,
name: 'msg',
anchor: '-5 -5' // anchor width and height
}]
});
var win = Ext.create('Ext.window.Window', {
title: 'Resize Me',
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
items: form,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win.show();
});
Hope i am clear this time...
Reply With Quote