rally set default value for combo box - combobox

I have a combobox for State that successfully filters in Rally. The code below works. I want to add an enhancement and have the combobox default to 'In Progress'. I added defaultValue but it has no effect. Thanks for your help.
Rally.onReady(function() {
Ext.define('Rally.example.CustomStoreGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.wsapi.Store', {
model: 'defect',
autoLoad: true,
limit: 1000,
pageSize: 1000,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'Name', 'Severity', 'State', 'InProgressDate', 'c_PlannedDeliveryVersion']
});
},
_onSelect: function() {
var grid = this.down('rallygrid'), store = grid.getStore();
store.clearFilter(true);
store.filter(this._getStateFilter());
},
_getStateFilter: function() {
return {
property: 'State',
operator: '=',
defaultValue: 'In Progress',
value: this.down('#priorityComboBox').getValue()
};
},
_onDataLoaded: function(store, data) {
var records = _.map(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
return Ext.apply({
// Age: Math.round(((new Date() - record.get('InProgressDate')) / 86400000) * 10) / 10;
}, record.getData());
});
this.add({
xtype: 'rallyfieldvaluecombobox',
itemId: 'priorityComboBox',
fieldLabel: 'Filter by State:',
model: 'defect',
// multiSelect: true,
field: 'State',
listeners: {
select: this._onSelect,
// ready: this._onLoad,
scope: this
}
});
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
limit: 1000,
pageSize: 1000,
data: records
}),
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name',
dataIndex: 'Name',
flex: 1
},
{
text: 'Severity',
dataIndex: 'Severity'
},
{
text: 'State',
dataIndex: 'State'
},
{
text: 'Planned Delivery Version',
dataIndex: 'c_PlannedDeliveryVersion',
flex: 0.25
},
{
text: 'In Progress Date',
dataIndex: 'InProgressDate',
xtype: 'datecolumn',
format:'Y-m-d'
},
{
text: 'Age',
dataIndex: 'InProgressDate'
,
renderer: function(value) {
return Math.round(((new Date() - value) / 86400000) * 10) / 10;
}
}
]
});
}
});
Rally.launchApp('Rally.example.CustomStoreGrid', {
name: 'Custom Store Grid Example'
});
});

Using value config property sets the default value:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0rc3 Docs'},
launch: function() {
this.add({
xtype: 'rallyfieldvaluecombobox',
model: 'UserStory',
field: 'ScheduleState',
value: 'In-Progress'
});
}
});

Related

ExtJS Combobox Rowediting Not Displaying The Latest Value After Click Update

I got this one rowediting with combobox for my project. The value displayed in the rowediting is coming from DB, then user can edit the value in rowediting. I got problem when i edit the combobox in it. The combobox display back the previous value after I click Update. The other fields are okay. The backend side also okay if I submit the grid form. The only problem right now is the combobox display. Anyone have any idea on this? Thank you so much in advanced :)
Screenshot image:
This is my JS code:
items: [
{
xtype: 'grid',
name: 'prescriptionGrid',
reference: 'prescriptionGrid', flex: 1, height: 200, scrollable: true,
store: {
type: 'array' ,
fields: ['id',
'inventorycatid',
'stationid',
'route',
'frequency',
'dose',
'duration',
'medicationName',
'quantity']
},
listeners: {
validateedit: 'prescriptionGridItemValidate',
beforeedit: 'prescriptionbeforeedit',
},
columns: [
{ text: 'Max Request Quantity', hidden: true, dataIndex:'maxRequestQuantity' },
//{ text: 'Created By', hidden: true, dataIndex:'createdby', name: 'createdby', value: data.createdbyname, reference:'createdby',},
{ text: 'Medication Name',
dataIndex: 'inventorycatid',
flex: 4,
reference: 'medicationName',
renderer: 'showPrescriptionItem',
editor: {
xtype: 'combobox',
name: 'inventorycatid',
minChars: 0,
queryMode: 'remote',
queryParam: 'cbxname',
store: {
type: 'InventoryCat',
autoLoad: true,
remoteFilter: true,
filters: [{ property: 'typename', value: 'Inventory:Medicine' }],
},
/* remoteFilter: false, */
valueField: 'id',
displayField: 'name',
forceSelection: true,
editable: false,
allowBlank: false,
listeners: {
select: 'inventorycatComboSelected',
}
}
},
{ text: 'Route',
dataIndex: 'route',
flex: 2,
reference: 'route',
editor: {
xtype: 'combobox',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
store: [
{ id: '250', name: 'Tab (Tablet)' },
{ id: '251', name: 'Caps (Capsule)' },
{ id: '252', name: 'Syrup' },
{ id: '253', name: 'IM (Intramuscular)' },
{ id: '254', name: 'IV (Intravenous)' },
{ id: '255', name: 'LA (Local Application)' },
{ id: '256', name: 'SL (Sublingual)' },
{ id: '257', name: 'SC (Subcutaneous)' },
],
editable: false,
name: 'route'
}
},
{ text: 'Dose',
dataIndex: 'dose',
flex: 1,
reference: 'dose',
editor: {
name: 'dose', allowBlank: false
}
},
{ text: 'Frequency',
dataIndex: 'frequency',
flex: 2,
reference: 'frequency',
editor: {
xtype: 'combobox',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
store: [
{ id: '250', name: 'Daily' },
{ id: '251', name: 'Every other day ' },
{ id: '252', name: 'BD (2x a day)' },
{ id: '253', name: 'TDS (3x a day) ' },
{ id: '254', name: 'QID (4x a day)' },
{ id: '255', name: 'Q4h (Every 4 hrs)' },
{ id: '256', name: 'Q4h-6h (Every 4 to 6 hrs) ' },
{ id: '257', name: 'qwk (every week)' },
],
name: 'frequency', allowBlank: true
}
},
{ text: 'Duration',
dataIndex: 'duration',
flex: 1,
reference: 'duration',
editor: {
name: 'duration', allowBlank: false
}
},
{
text: 'Quantity',
dataIndex: 'quantity',
flex: 1,
reference: 'quantity',
editor: {
name: 'quantity', allowBlank: false
}
}
],
selType: 'rowmodel',
plugins: [
{ ptype: 'rowediting', id: 'rowEditPlugin', clicksToMoveEditor: 1, autoCancel: false,
}
]
},
],
And here is my ControllerJS:
showPrescriptionItem: function(value, metaData, record, rowIndex, colIndex, store, view) {
console.log(record.data, "ShowPrescription"); //After edit, capture correct inventorycat but wrong medicationName
// console.log(value, "ShowPrescription2");
return record.get('medicationName') || this.getViewModel().get('inventoryMap')[value];
},
inventorycatComboSelected: function(combo, record) {
var vm = this.getViewModel(),
map = vm.get('inventoryMap');
map[record.id] = record.data.name;
vm.set('inventoryMap', map);
console.log(record.data, "InventorycatSelected"); //After edit, capture correct id & name
//return(map);
// var itemRecord = combo.up('editor').context.record;
},
prescriptionGridItemValidate: function(editor, e) {
rowIndex = e.rowIdx;
var itemid = editor.editor.form.findField('inventorycatid').getValue();
var unit = editor.editor.form.findField('quantity').getValue();
if(!Ext.isNumeric(unit)) {
Ext.Msg.alert('Error', 'Quantity must be in numeric');
e.cancel = true;
}
else if(parseInt(unit) < 0) {
Ext.Msg.alert('Error', 'The quantity has to be 0 or more');
e.cancel = true;
}
else {
e.cancel = false;
}
console.log(e.newValues,'context')
},
prescriptionbeforeedit: function(elemnt,cell){
if (cell.record.data.inventorycatid != ''){
elemnt.editor.form.getFields().items[0].setDisabled(true)
elemnt.editor.form.getFields().items[0].setRawValue(cell.row.cells[0].textContent)
} else {
elemnt.editor.form.getFields().items[0].setDisabled(false)
}
},
Tq for ur respond. I have fixed this issue before. I changed my renderer code as below & it works:
showPrescriptionItem: function(value, metaData, record, rowIndex, colIndex, store, view) {
var map = this.getView().getViewModel().get('inventoryMap');
var medicationName = record.get('medicationName');
//console.log(map[value], 'map value');
if(medicationName !== '' && map[value] == undefined) {
console.log(medicationName, "ShowPrescriptionOldVal");
return medicationName;
}
else {
console.log(map[value], "ShowPrescriptionNewVal");
return map[value];
}
}

Sencha Offline Proxy

facing issue in Sencha offline proxy , when json received 100 records
offline proxy only add 50 records add in store here is my simple code
response.responseText [my ajax response], it returns reocords set
var data = Ext.decode(response.responseText);
for (var c=0; c < data.length; c++){
console.log(c);
var itemrecord = Ext.create('Inertia.model.InstallingCompany');
itemrecord.set(data[c]);
Ext.getStore('InstallingCompanies-offline').add(itemrecord);
}
console.log(c);
console.log(Ext.getStore('InstallingCompanies-offline').data.length);
For this you can use direct store.loadData() method of store.
In this FIDDLE, I have create a demo using gridpanel and Ext.data.Store. I hope this FIDDLE will help you or guide you to achieve your requirement.
Code Snippet
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
Ext.create('Ext.data.Store', {
storeId: 'topicsStore',
model: 'ForumThread'
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
Ext.create('Ext.grid.Panel', {
height: window.innerHeight,
title: 'Example of Store loadData() with GRID and Ajax Request',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('topicsStore'),
loadMask: true,
columns: [{
xtype: 'rownumberer',
width: 35,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true
}, {
text: "Author",
dataIndex: 'username',
flex: 0.5,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 90,
sortable: false
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
flex: 0.5,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
listeners: {
afterrender: function (cmp) {
var store = Ext.data.StoreManager.lookup('topicsStore'),
store1;
cmp.getEl().mask('Please wait..!');
Ext.Ajax.request({
url: 'topics.json',
success: function (data) {
var response = Ext.decode(data.responseText);
store.loadData(response.topics);
cmp.getEl().unmask();
//Add data using store.add() method in Store
store1 = Ext.create('Ext.data.Store', {
model: 'ForumThread'
});
response.topics.forEach(function (item) {
store1.add(item);
})
console.log(`total count of store1 data is ${store1.getCount()}`);
}
});
}
}
});

MultiSelect in extjs Combobox

I'm trying to multiselect in combobox of the Extjs, After I select the Items , the tpl index is rendered , want to render the value that's the displayfield selected when away out from the cell, how can I be able to Achieve this.
here's the code
function run() {
var myStore=Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['busname', 'time', 'typebus',],
pageSize:2,
proxy: {
type: 'memory',
enablePaging: true
},
data: [{
busname: 'ABCD',
time: '15:30:00',
typebus: 'AC Volvo',
}, {
busname: 'aaa',
time: '13:30:00',
typebus: 'Seater',
},{
busname: 'AAAA',
time: '18:30:00',
typebus: 'Sleeper',
},{
busname: 'ABCD',
time: '19:30:00',
typebus: 'AC Volvo',
},]
});
Ext.create('Ext.grid.Panel', {
xtype :'gridpanel',
itemId:'busTimegrid',
pageSize:1,
title: 'BUS DEATILS',
mapperId:'getBusTime',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Bus Name',
dataIndex: 'busname',
editor: 'textfield'
}, {
text: 'Bus Time',
dataIndex: 'time',
xtype: 'gridcolumn',
renderer: function (value) {
if (value instanceof Date)
         return Ext.util.Format.date(value, 'H:i:s');
     else
     return value;
},
flex: 1,
editor: {
xtype: 'timefield',
format: 'H:i:s',
allowBlank: true,
maskRe: /[0-9,:]/,
listeners: {
beforeselect: function(timefield, record) {
var grid = timefield.up('grid');
if(grid.store.find('time', record.data.disp) != -1) {
Ext.Msg.alert("Bus time already exist.");
return false;
}
}
}
}
}, {
header: 'Bus TYpe',
dataIndex: 'typebus',
editable:true,
renderer: function (value) {
if (Ext.isNumber(value)) {
var store = this.getEditor().getStore();
return store.findRecord('id', value).get('name');
}
return value;
},
editor: {
xtype: 'combo',
displayField: 'name',
valueField: 'id',
editable:true,
forceSelection:true,
multiSelect: true,
displayTpl: '<tpl for=".">' +
'{name}' +
'<tpl if="xindex < xcount">, </tpl>' +
'</tpl>',
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
id: 1,
name: 'AC Volvo'
}, {
id: 2,
name: 'Seater'
}, {
id: 3,
name: 'Sleeper'
}]
})
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
listners: [{
fn: 'onUsernamefieldBlur',
event: 'blur',
delegate: 'busname'
}],
onUsernamefieldBlur: function (textfield, e, eOpts) {
if (textfield.getValue() === '') {
Ext.Msg.alert("Busname can't be empty");
textfield.setFocus(true);
}
},
height: 200,
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
var gridRow = myStore.getModifiedRecords();
Ext.each(gridRows, function (gridRow) {
var dirtyInd = myStore.indexOf(gridRow);
var newTime = new Date(store.getAt(dirtyInd).data.time);
},
myStore.each(function (record, idx) {
var newT = new Date(record.get('time'));
if (Ext.Date.diff(newTime, newT,Ext.Date.SECOND)=== 0)
{
samebustime = true;
}
}));
if(samebustime){
Ext.Msg.alert('Warning','Same time occured')
}
}
Fiddle
I have done some modification to your original source code. You might like it or not. But in this code you get what you have asked for. I am not sure if that is exactly what you want.
Ext.application({
name: 'Fiddle',
launch: function () {
run();
window.show();
}
});
function run() {
var myStore = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['busname', 'time', 'typebus',],
pageSize: 2,
proxy: {
type: 'memory',
enablePaging: true
},
data: [{
busname: 'ABCD',
time: '15:30:00',
typebus: 'AC Volvo',
}, {
busname: 'aaa',
time: '13:30:00',
typebus: 'Seater',
}, {
busname: 'AAAA',
time: '18:30:00',
typebus: 'Sleeper',
}, {
busname: 'ABCD',
time: '19:30:00',
typebus: 'AC Volvo',
},]
});
var typebusStore = Ext.create('Ext.data.Store', {
storeId: 'typeBusStore',
fields: ['id', 'name'],
data: [{
id: 1,
name: 'AC Volvo'
}, {
id: 2,
name: 'Seater'
}, {
id: 3,
name: 'Sleeper'
}]
})
Ext.create('Ext.grid.Panel', {
xtype: 'gridpanel',
itemId: 'busTimegrid',
pageSize: 1,
title: 'BUS DEATILS',
mapperId: 'getBusTime',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Bus Name',
dataIndex: 'busname',
editor: 'textfield'
}, {
text: 'Bus Time',
dataIndex: 'time',
xtype: 'gridcolumn',
renderer: function (value) {
if (value instanceof Date)
return Ext.util.Format.date(value, 'H:i:s');
else
return value;
},
flex: 1,
editor: {
xtype: 'timefield',
format: 'H:i:s',
allowBlank: true,
maskRe: /[0-9,:]/,
listeners: {
beforeselect: function (timefield, record) {
var grid = timefield.up('grid');
if (grid.store.find('time', record.data.disp) != -1) {
Ext.Msg.alert("Bus time already exist.");
return false;
}
}
}
}
}, {
header: 'Bus TYpe',
dataIndex: 'typebus',
editable: true,
renderer: function (value, md, record) {
var retValue = Array();
if (Ext.isArray(value)) {
Ext.each(value, function(id) {
retValue.push(Ext.data.StoreManager.lookup('typeBusStore').findRecord('id', id).get('name'));
});
}
if (retValue.length > 0) {
return retValue.join(", ");
}
return value;
},
editor: {
xtype: 'combo',
displayField: 'name',
valueField: 'id',
editable: true,
forceSelection: true,
multiSelect: true,
displayTpl: '<tpl for=".">' +
'{name}' +
'<tpl if="xindex < xcount">, </tpl>' +
'</tpl>',
store: typebusStore
}
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
listners: [{
fn: 'onUsernamefieldBlur',
event: 'blur',
delegate: 'busname'
}],
onUsernamefieldBlur: function (textfield, e, eOpts) {
if (textfield.getValue() === '') {
Ext.Msg.alert("Busname can't be empty");
textfield.setFocus(true);
}
},
height: 200,
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
var gridRows = myStore.getModifiedRecords();
console.log(gridRows)
var samebustime = false;
Ext.each(gridRows, function (gridRow) {
var dirtyInd = myStore.indexOf(gridRow);
var newTime = new Date(store.getAt(dirtyInd).data.time);
myStore.each(function (record, idx) {
var newT = new Date(record.get('time'));
if (Ext.Date.diff(newTime, newT, Ext.Date.SECOND) === 0) {
samebustime = true;
}
})
});
if (samebustime) {
Ext.Msg.alert('Warning', 'Same time occured')
}
}
Fiddle

ExtJS5 Web Desktop Sample: Unable to fire event from controller

I have been working with web desktop example in ExtJS5. The example has static data and no events. I wanted to implement a click event on 'Remove Something' button on grid window. Here is my modified code:
Ext.define('SampleApp.view.main.GridWindow', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
init: function () {
this.launcher = {
text: 'Grid Window',
iconCls: 'icon-grid'
};
},
controller: 'gridwindow',
createWindow: function () {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if (!win) {
win = desktop.createWindow({
id: 'grid-win',
title: 'Grid Window',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
store: mock.view.main.GridWindow.getDummyData(),
columns: [{ xtype: 'rownumberer', sortable: false, text: "S.N.", width: 70 }, {
id: 'topic',
text: "Topic",
dataIndex: 'gridTopic',
flex: 1,
align: 'center'
}, {
text: "Author",
dataIndex: 'gridAuthor',
flex: 1,
align: 'center',
sortable: true
}, {
text: "Replies",
dataIndex: 'gridReplies',
align: 'center',
flex: 1,
sortable: true
}, {
id: 'last',
text: "Last Post",
dataIndex: 'gridLastPost',
flex: 1,
align: 'center',
sortable: true
}]
}
],
tbar: [{
text: 'Add Something',
tooltip: 'Add a new row',
iconCls: 'add'
}, '-', {
text: 'Options',
tooltip: 'Modify options',
iconCls: 'option'
}, '-', {
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls: 'remove',
listeners: {
click: 'onDeleteClick'
}
}]
});
}
return win;
},
statics: {
getDummyData: function () {
var _store = Ext.create('Ext.data.Store', {
fields: [
{ name: 'gridId', type: 'int' },
{ name: 'gridTopic', type: 'string' },
{ name: 'gridAuthor', type: 'string' },
{ name: 'gridReplies', type: 'string' },
{
name: 'gridLastPost', type: 'date', convert: function (value) {
var _date = new Date(value);
return Ext.Date.format(_date, "Y-m-d H:i:s");
}
}
]
});
var _responseText;
Ext.Ajax.request({
async: false,
url: 'http://localhost/sampleapp/getusers',
method: 'GET',
success: function (resp) {
_responseText = Ext.decode(resp.responseText);
_store.loadData(_responseText);
}
});
return _store;
}
}
});
I am unable to handle 'onDeleteClick' event inside the controller. Here is the controller definition:
Ext.define('SampleApp.view.main.GridWindowController', {
extend: 'Ext.app.ViewController',
alias: 'controller.gridwindow',
onDeleteClick: function (button, evt) {
alert('Clicked');
}
});
Can someone point out the mistake. How can this event be handled?
Ext.ux.desktop.Module does not accept controller config option.
Use your controller on an Ext.Component — in your case either the grid or the window.

How to show the value for edit in a window in time format from grid in extjs 4

I am using extjs 4.1 .I have a grid that is showing date in desired time format. But when I want to show the date and intime and outtime in a window for edit then only date is displaying. but intime and outtime is not displaying. All the fields in database are datetime. Can anyone please help me on this. Here is my code below :
my grid is like below :
Ext.define('Ext4Example.view.attendence.Datagrid' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.datagrid',
layout: 'fit',
border: true,
viewConfig: {
stripeRows: true,
forceFit:true,
emptyText:'No Records to display'
},
hideHeaders: false,
initComponent: function() {
this.store = 'Attendences';
//this.width = 400;
this.columns = [
{
text: 'Date',
dataIndex: 'id',
renderer: function(value, metaData){
return Ext.Date.format(value, 'M d, Y');
}
},{
text: 'Day',
dataIndex : 'id',
renderer: function(value, metaData){
return Ext.Date.format(value, ' l');
}
},
{
text: 'In-Time',
dataIndex: 'intime',
renderer: function(value, metaData){
return Ext.Date.format(value, 'h:i A');
}
},
{
text: 'Out-Time',
dataIndex: 'outtime',
renderer: function(value, metaData){
return Ext.Date.format(value, 'h:i A');
}
}
];
this.callParent(arguments);
}
});
And the window is given below where i want the values for edit :
Ext.define('Ext4Example.view.attendence.Editattendence' ,{
extend: 'Ext.window.Window',
alias : 'widget.editattendence',
title: 'Edit Attendence',
layout: 'fit',
autoShow: true,
initComponent: function () {
this.items = [
{
xtype: 'form',
bodyStyle: {
background: 'none',
padding: '10px',
border: '0'
},
items: [
{
xtype: 'datefield',
name: 'id',
allowBlank: false,
fieldLabel: 'Attendene ID'
},
{
xtype: 'numberfield',
name: 'intime',
allowBlank: false,
fieldLabel: 'IN TIME',
renderer: function(value, metaData){
return Ext.Date.format(value, 'h:i A');
}
},{
xtype: 'numberfield',
fieldLabel: 'OUT TIME',
name: 'outtime',
renderer: function(value, metaData){
return Ext.Date.format(value, 'h:i A');
}
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
And the controller where I am calling this window on double click in grid row is given below :
Ext.define('Ext4Example.controller.Attendences', {
extend: 'Ext.app.Controller',
stores: [
'Attendences','Months'
],
models: [
'Attendence','Month'
],
views: [
'attendence.Timeperiod','attendence.Details','attendence.Attendencewindow','attendence.Editattendence','attendence.Datagrid' //'attendence.Months'
],
refs: [{
ref: 'stockaddForm',
selector: 'form'
}],
init: function () {
this.control({
'datagrid': {
itemdblclick: this.editUser,
viewready: this.attnready
},
'attendencewindow button[action=save]': {
click: this.save
}
});
},
editUser: function(grid, record){
var view = Ext.widget('editattendence');
view.down('form').loadRecord(record);
},
save: function(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear(); //+1
Ext.Msg.alert("Today is - ",dd+" - "+mm+" - "+yyyy);
},
attnready: function(grid, eOpts) {
console.log('hello');
var store = grid.getStore(),
selModel = grid.getSelectionModel();
if (store.getAt(0)) {
selModel.select(0);
}
}
});
Hey I have solve this problem. Just a little bit of change in the editAttendence form as follows :
Ext.define('Ext4Example.view.attendence.Editattendence' ,{
extend: 'Ext.window.Window',
alias : 'widget.editattendence',
title: 'Edit Attendence',
layout: 'fit',
autoShow: true,
initComponent: function () {
this.items = [
{
xtype: 'form',
bodyStyle: {
background: 'none',
padding: '10px',
border: '0'
},
items: [
{
xtype: 'datefield',
name: 'id',
allowBlank: false,
fieldLabel: 'Attendene ID'
},
{
xtype: 'datefield',
format:'h:i A',
name: 'intime',
allowBlank: false,
fieldLabel: 'IN TIME'
},{
xtype: 'datefield',
format:'h:i A',
fieldLabel: 'OUT TIME',
allowBlank: false,
name: 'outtime'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});

Resources