PDA

View Full Version : Searchable grid



Dannesart
18 Nov 2011, 1:39 AM
Hi I got a grid and a searchfield in the topToolbar.
What I wanted to do is that the grid should filter when I type in some text.

My grid:


Ext.define('Intelliplan.Modules.Staffing.Consultant.Grid', {
extend: 'Intelliplan.Modules.Staffing.Consultant.GridUi',
alias: 'widget.modules.staffing.consultant.grid',
companyNo: undefined,
initComponent: function () {
this.callParent(arguments);
this.defineReferences();

//add handlers

this.searchConsultantField.on('keyup', this.onSearchFieldKeyUp, this, { buffer: 300 });
this.sendSmsButton.on('click', this.onSendSmsButtonClick, this);
this.sendEmailButton.on('click', this.onSendEmailButtonClick, this);
this.sendPortalInfoButton.on('click', this.onSendPortalInfoButtonClick, this);
this.on('itemclick', this.onGridItemClick, this);
this.on('datachanged', this.ondatachanged, this);
this.getSelectionModel().on('selectionchange', this.onGridSelectionChange, this);
this.store.on('load', this.onLoad, this);
},
defineReferences: function() {
this.sendSmsButton = this.down('#sendSmsButton');
this.sendEmailButton = this.down('#sendEmailButton');
this.sendPortalInfoButton = this.down('#sendPortalInfoButton');
this.searchConsultantField = this.down('#searchConsultantField');
},


onSearchFieldKeyUp: function(textField, e) {

if (!e.isNavKeyPress()) {
if (textField.getValue().length === 0) {
this.consultantGrid.clear();
}
else if (textField.getValue().length > 2) {
this.consultantGrid.search(textField.getValue());
}
}
},


onLoad: function(store, records, successful, operation, options) {
this.getStore().filterBy(function(record) {
//
// if (record.get('missingTimeReportWeeks') === 0 && Ext.isEmpty(record.get('nextPlannedActivitySubject'))) {
// return false;
// console.log(record.get('missingTimeReportWeeks'));
// }
return true;

});
},

loadStore: function(companyNo, dateFrom) {
this.store.getProxy().extraParams = {
companyNo: companyNo,
dateFrom: Ext.Date.format(dateFrom, 'Y-m-d')
};
this.store.load();
},

loadGridData: function(companyNo, dateFrom) {
//cache param for future reloads
this.companyNo = companyNo;
this.dateFrom = dateFrom;
//var dateFrom = Ext.Date.getFirstDateOfMonth(selectedDate);
// var dateTo = Ext.Date.getLastDateOfMonth(selectedDate);

this.loadStore(companyNo, dateFrom);
// this.loadStore(companyNo, dateFrom, dateTo);
},

ondatachanged: function() {
this.loadStore();
},


showConfirmationDialog: function(empNo) {
var dialog = Ext.create('Intelliplan.Modules.Staffing.BookEmployee.Consultant.Shift.BookingConfirmationDialog',
{
consultantEmpNo: empNo
}
);
dialog.show();

},
setDisabledOnMessagingButtons: function(disabled) {
this.sendSmsButton.setDisabled(disabled);
this.sendEmailButton.setDisabled(disabled);
this.sendPortalInfoButton.setDisabled(disabled);

},
// setDisabledOnMessagingButtonsPortalInfo: function(disabled) {
// this.sendPortalInfoButton.setDisabled(disabled);
// },

onGridSelectionChange: function(model, selected, options) {
this.setDisabledOnMessagingButtons(model.getCount() < 1)
// this.setDisabledOnMessagingButtonsPortalInfo(model.getCount() != 1)
},



onSendSmsButtonClick: function() {
if (this.selectedConsultantsHasMobilePhone()) {
var smsDialog = Ext.create('Intelliplan.Common.Messaging.SMS.Standard', {
sendCommand: 'Intelliplan.Data.General.Employee.Command.SendSms',
allowAdd: false
});
smsDialog.sendCommandParams = {
empNos: this.getSelectedIds()
};
smsDialog.show();
} else {
this.showMissingMobilePhoneNumberMessageBox();
}
},
onSendEmailButtonClick: function() {
if (this.selectedConsultantsHasEmail()) {
var emailDialog = Ext.create('Intelliplan.Common.Messaging.Mail.Standard', {
sendCommand: 'Intelliplan.Data.General.Employee.Command.SendEmail'
});
emailDialog.sendCommandParams = {
empNos: this.getSelectedIds()
};
emailDialog.show();
} else {
this.showMissingEmailMessageBox();
}
},
onSendPortalInfoButtonClick: function() {

//TODO send command here when succes show messagebox
// if (this.selectedConsultantsHasEmail()) {
// Intelliplan.Util.Messagebox.showMessage('Portalinformation skickad', function() {
// this.store.load();
// }, this);
// } else {
// this.showMissingEmailMessageBox();
// }
if (this.selectedConsultantsHasEmail()) {

var doit = Ext.create('Intelliplan.Data.System.UserAccountAdmin.Command.CreateAccountForConsultantsAndSendEmail');
var errorMessage = 'wrong!';
var data = {
empnos: this.getSelectedIds()
};

doit.execute(data, function() {
alert('grejs');
}, errorMessage, this);
}


// var params = {
// empNo: this.getSelectedIds();
// };
// Ext.apply(params, this.sendCommandParams);
//if (this.selectedConsultantsHasEmail()) {
//var cmd = Ext.create('Intelliplan.Data.System.UserAccountAdmin.Command.CreateAccountForConsultantAndSendEmail');
//
//cmd.execute(params, function(result) {
// this.close();
//}, this);
},
onGridItemClick: function(view, record, item, index, e) {

var clickPos = view.getPositionByEvent(e);
var columnName = this.columns[clickPos.column].dataIndex;
if (columnName == 'countConfirmationNeed') {
if (record.get('countConfirmationNeed') > 0) {
this.showConfirmationDialog(record.get('empNo'));
}
}

}
,
selectedConsultantsHasMobilePhone: function() {
var result = true;
Ext.each(this.getSelectionModel().getSelection(), function(record, index, allRecords) {
if (record.get('hasMobilePhone') === false) {
result = false;
return false;
}
}, this);
return result;
}
,
selectedConsultantsHasEmail: function() {
var result = true;
Ext.each(this.getSelectionModel().getSelection(), function(record, index, allRecords) {
if (record.get('hasEmail') === false) {
result = false;
return false;
}
}, this);
return result;
}
,
showMissingEmailMessageBox: function() {
Intelliplan.Util.Messagebox.showError('En eller flera valda konsulter saknar epostadress, åtgärda felet och försök igen.');
}
,
showMissingMobilePhoneNumberMessageBox: function() {
Intelliplan.Util.Messagebox.showError('En eller flera valda konsulter saknar ett mobiltelefonnummer, åtgärda felet och försök igen.');
}
,
showContextMenu: function(grid, index, isInSelection, e) {
var empNo = this.getStore().getAt(index).getId();
Intelliplan.Util.ContextMenu.show(e, {
empNo: empNo
});
}

});



it says: this.consultantGrid is undefined

Any Idea?

tvanzoelen
18 Nov 2011, 1:51 AM
Where is that grid defined? In Intelliplan.Modules.Staffing.Consultant.GridUi?

Be sure that you set that property in your init or constructor.

Dannesart
18 Nov 2011, 2:02 AM
this is the GridUi:



Ext.define('Intelliplan.Modules.Staffing.Consultant.GridUi', {
extend: 'Intelliplan.Base.Grid.CheckboxMultiSelection',
initComponent: function () {

Ext.apply(this, {

title: IPtranslate('Intelliplan.Modules.Staffing.Consultant.GridUi.Title'),
stripeRows: true,
ui: 'misc',
frame:true
});

this.callParent(arguments);
this.consultantGrid = this.down('#consultantGrid');
},

defineStore: function() {
return Ext.create('Intelliplan.Base.Store.Standard', {
model: 'Intelliplan.Data.Staffing.Dashboard.Query.Consultant',
storeId: 'reloadStore'
});
},

defineColumns: function() {
return [
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.EmployeeColumn.Header'),
width: 160,
dataIndex: 'fullName',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.employeeWithUserAccountStatus
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.AgeColumn.Header'),
width: 55,
dataIndex: 'age',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.employeeAge
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.PlannedActivitySubjectColumn.Header'),
width: 100,
dataIndex: 'nextPlannedActivitySubject',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.nextPlannedActivity
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.JobInterestColumn.Header'),
width: 90,
dataIndex: 'countInterest',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.jobInterestCountWithRecentlyLoggedOnStatus
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.ConfirmationNeedCountColumn.Header'),
width: 70 ,
dataIndex: 'countConfirmationNeed',
sortable: true,
align: 'center',
renderer: Intelliplan.Common.General.ColumnRenderers.cellNavigationNonZeroValue
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.MissingTimeReportsColumn.Header'),
width: 70,
dataIndex: 'missingTimeReportWeeks',
sortable: true,
align: 'center',
renderer: Intelliplan.Common.General.ColumnRenderers.missingTimeReports
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.OccupancyColumn.Header'),
width: 70,
dataIndex: 'belaggning',
sortable: true,
align: 'center',
renderer: Intelliplan.Common.General.ColumnRenderers.percentage
},
// {
// xtype: 'gridcolumn',
// header: IPtranslate('Intelliplan.Common.Grid.GuaranteeHoursColumn.Header'),
// width: 50,
// dataIndex: 'guaranteeHours',
// align: 'center',
// sortable: true,
// renderer: Intelliplan.Common.General.ColumnRenderers.guaranteeHours
// },

{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.GuaranteeHoursColumn.Header'),
width: 50,
dataIndex: 'guaranteeSalaryHours',
align: 'center',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.guaranteeSalaryHours
},

{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.TGColumn.Header'),
width: 50,
dataIndex: 'tg',
align: 'center',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.percentage
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.EmploymentInfoColumn.Header'),
width: 90,
dataIndex: 'employmentInfo',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.employmentInfo
},
{
xtype: 'gridcolumn',
header: IPtranslate('Intelliplan.Common.Grid.EmploymentPeriodColumn.Header'),
width: 160,
dataIndex: 'employeeEndDate',
sortable: true,
renderer: Intelliplan.Common.General.ColumnRenderers.employmentPeriod
}
];
},



defineTopToolbar: function() {
return [

{
xtype: 'modules.staffing.consultant.sendpicker.dropdown',
iconCls: 'silk-email-go',
text: IPtranslate('Intelliplan.Modules.Staffing.BookEmployee.Consultant.Scheduler.ScheduleUi.CommunicationDropdown.Text'),//Tillgänglighet
// tooltip: IPtranslate('Intelliplan.Modules.Staffing.BookEmployee.Consultant.Scheduler.ScheduleUi.AvailabilityDropdown.Tooltip'),//Ange tillgänglighet per vecka/dag
itemId: 'sendDropdown'

},
{
xtype: 'tbspacer',
width: 5
},
{ xtype: 'tbseparator'

},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'displayfield',
value: 'Sök konsult',
width:50
},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'textfield',
itemId: 'searchConsultantField',
enableKeyEvents: true,
emptyText: IPtranslate('Intelliplan.Base.Picker.Base.SearchField.EmptyText')
}

];


}







});


maby a problem is that it extend to a checkboxMultiSelection:


Ext.define('Intelliplan.Base.Grid.CheckboxMultiSelection', {
extend: 'Intelliplan.Base.Grid.CheckboxSelection',
initComponent: function () {
this.callParent(arguments);
this.getSelectionModel().setSelectionMode('MULTI');
}
});



But now it returns: this.consultantGrid is null

tvanzoelen
18 Nov 2011, 2:05 AM
Its quite some code. Can yiou point me out where this.consultantGrid is defined?

there must be a place where you have created an instance of this item.

tvanzoelen
18 Nov 2011, 2:09 AM
a I see it


this.consultantGrid = this.down('#consultantGrid');

maybe that part must in the Ext.Apply part so that it becomes available in the classystem. Or be given through in the arguments


this.callParent(arguments);

Dannesart
22 Nov 2011, 2:49 AM
Hmm it doesnt seemed to work :/ But instead i
put my searchfield into my consultantListUi so it could refer to my itemId:consultantGrid :


Ext.define('Intelliplan.Modules.Staffing.Dashboard.ConsultantListUi', {
extend: 'Intelliplan.Base.Panel.Standard',
mixins: {
helpcontext: 'Intelliplan.Util.HelpContext'
},
initComponent: function () {

this.mixins.helpcontext.constructor.call(this, { helpContextId: 1005 });


Ext.apply(this, {
title: IPtranslate('Intelliplan.Modules.Staffing.Dashboard.ConsultantListUi.Title'),
layout: {
type: 'vbox',
align: 'stretch',
padding: 3
},
items: [
{
xtype: 'modules.staffing.consultant.grid',
itemId: 'consultantGrid',
flex: 1,

viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
}
}

],
tbar: this.defineTopToolbar()

});
// this.consultantGrid = this.down('#consultantGrid');
this.callParent(arguments);



},


defineTopToolbar: function(){
return [
{
xtype: 'displayfield',
value: IPtranslate('Intelliplan.Common.Toolbar.SelectionDisplayField.Value')
},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'common.company.triggerfield',
selectDefaultValue: true,
itemId: 'companyTriggerField'
},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'displayfield',
value: IPtranslate('Intelliplan.Common.Toolbar.MonthDisplayField.Value')
},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'common.general.monthcombobox',
selectTodaysMonthAsDefault: true,
fieldLabel: '',
itemId: 'monthComboBox'
},
{
xtype: 'tbspacer',
width: 10
},
{
xtype: 'displayfield',
value: IPtranslate('Intelliplan.Common.Toolbar.YearDisplayField.Value')
},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'common.general.yearspinnerfield',
itemId: 'yearSpinnerField'
},
{
xtype: 'tbspacer',
width: 5
},
{ xtype: 'tbseparator'

},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'displayfield',
value: 'Sök konsult',
width:65
},
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'textfield',
itemId: 'searchConsultantField',
enableKeyEvents: true,
emptyText: IPtranslate('Intelliplan.Base.Picker.Base.SearchField.EmptyText')
}

];
}
});


and my grid is now extended to searchableCheckbox.js:


Ext.define('Intelliplan.Base.Grid.SearchableCheckbox', {
extend: 'Intelliplan.Base.Grid.CheckboxSelection',
initComponent: function () {
this.callParent(arguments);
this.getSelectionModel().setSelectionMode('MULTI');

//add handlers
this.store.on('load', this.onStoreLoad, this);
},
onStoreLoad: function(store, records, options) {
if (store.getCount() > 0) {
// this.selectFirstItem();
}
},
search: function(value) {
this.store.getProxy().extraParams =
{
search: value

};
this.store.load();
},
clear: function() {
this.store.removeAll();
},
getCount: function() {
this.store.getCount();
},

hasItemSelected: function() {
return this.getSelectionModel().getCount() > 0;
}//,
// selectFirstItem: function() {
// this.getSelectionModel().select(0);
// }


}
);


this now returns


_dc
1321958129475


limit
25


page
1


search
dfg


start
0




and


{ "success": false, "errorCode": null, "errorMessage": null, "errors": [ { "Id": "dateFrom", "Message": "Warning! value not posted: DateFrom" } ] }

tvanzoelen
22 Nov 2011, 3:09 AM
Is that good or is it bad? I cannot look into youyr serverside code. The query is under the search variable

Dannesart
22 Nov 2011, 4:02 AM
it's bad :P hmm is it possible to exclude dateFrom value from the search? :P