UPDATED: I answered my own question. It may be and idiots solution but then again I am not convinced the frame work is idiot proof. My problem was that I could not get the load event to fire for my store. I added the following lines after the init function but before this.control function:
init: function() {
Ext.getStore('Users').addListener('load',this.onUsersStoreLoad, this);
Ext.getStore('Users').addListener('datachanged',this. onUsersStoreDataChange, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
onUsersStoreLoad: function(me,records,success)
{
// Do something ignorant with your code here
};
This works for a paged grid/store or whatever. Please feel free to make suggestion on how to improve this if this is a bad way to approach the load event for my store.
Thanks, UPDATE END:
I can not for the love of god/country figure how to loop through a store or grid. I am newbie and while I think it would better to loop through the store opposed to a grid I can seem to find a way to do either. I have read several posts where folks seemingly have the same issue and have found a solution. However, when I try to implement the solution i get an undefined error when loging to console. Clearly my understanding is sub par as I am unable to determine if i am putting my code in the proper places.
I have used this link in SO as a model of what I want to do and I can't get it to work:
http:/stackoverflow.com/questions/3149107/how-to-loop-through-the-extjs-grid-object-to-get-its-elements-and-values
I want to disable dates in my date picker with an array. It works when I hard code it but what I really want to do is load the dateArray dynamically with the unix_time_stamp coloumn of my grid provided by my users store. I have tried stub in message boxes everywhere I can possibly do it and I can not seem to get it to fire so that tells me i am fundamentally screwed up. Please help.
View:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
// submitFormat: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
Store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here
}
}
});
Viewport:
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
// var disabledDates = [];
// var usersStore = Ext.getStore('User');
// console.log(usersStore);
// usersStore.store.each(function(record){
// disabledDates.push(record.get(unix_time_stamp));
// });
Ext.application({ requires: ['Ext.container.Viewport'], name: 'AM', appFolder: 'app', controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
// disabledDates:["^(?!"+dateArray.join("|")+").*$"],
disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
// Ext.Msg.alert('date picker example in init2.js' + '<br>' + Ext.Date.format(date,'m/d/Y'));
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
// store.proxy.extraParams = { key:'test'};
store.load();
// store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
