View Full Version : Check and limit the value.

21 Oct 2013, 1:35 AM
Okay, I have this grid (see pic. below)


and this code for method:

var scope = this;
var vo = record;
var sel = scope.getShowImages().getSelectionModel().getSelection();
var user = scope.getProfinfo().getForm().getValues();
var filename = sel[0].data.filename;
var transition = scope.getTransition().getValue();
var time = scope.getTime().getValue();
var date = new Date();
var playlistid = scope.getRndInt().getValue();

console.log('eto ang p',p)


Ext.Msg.alert('Error','Check your inputs.');



What I want is to check the value inserted, Users are allowed to input multple entries but stay time shouldn't exceed in 30. I am lost. What should I do?

Thank you in advance!

21 Oct 2013, 2:26 AM
how are users entering data? you have to limit it there. you can use the numberfield to take value from the user in some form or as editor in the grid and specify the maxValue config.


21 Oct 2013, 2:39 AM

this is where the user inputs the stay time.

this is my code:

//Customer Maintenance Form popup
extend: 'Ext.Window',
id: 'dlti-thumbnail-popup',
alias: 'widget.ThumbnailPopup',
plain: true,
modal: true,
closable: false,
resizeable: false,
layout: 'fit',

title: 'Create Playlist',
width: 500,
align: 'center',

items: {
id: 'thumbnail-window',
bodyPadding: 10,
bodyBorder: true,
allowBlank: false,

items: [

xtype: 'ShowImages',

xtype: 'combo',
store: Ext.create('Ext.data.Store', {
fields: ['name','value'],
data : [
{"name":"Transition 1","value":"Transition 1"},
{"name":"Transition 2","value":"Transition 2"},
{"name":"Transition 3","value":"Transition 3"},

displayField: 'name',
valueField: 'value',
forceSelection: true,
allowBlank: false,
fieldLabel: 'Transition',
width: 400,
xtype: 'textfield',
id: 'timeframe',
name: 'time',
fieldLabel: 'Stay Time',
allowBlank: false,
width: 400,

buttons: [
{text: 'Save', action:'submit', width:50},
{text: 'cancel', action:'cancel', width:50}



21 Oct 2013, 2:50 AM
there are two ways to do it:

i) replace textfield with numberfield for that field and then use maxValue: 30 so that users can only enter integers up to 30.

ii) leave it as a textfield and use a custom validator using the vtype config for textfield.

the first method is simpler in my view.

21 Oct 2013, 3:05 AM
No, I need the summation of all the value of the staytime, the summation is the one who's not allowed to exceed 30.

21 Oct 2013, 3:17 AM
then you should use the vtype and in the validator function, check all values:

Ext.apply(Ext.form.field.VTypes, {
checkMax: function(val, field) {
var total = 0;
var allRecords = Ext.getCmp('grid_ID').getStore().getRange();

for(var i=0; i<allRecords.length; i++)
total += allRecords[i].get('time'); // or whatever field you want to check
if(total > 30)
return false;
return true;
checkMaxText: 'Total exceeds 30'

and in your textfield, use the config:

vtype: 'checkMax'

you should be able to access your grid or store in this validator function. either by assigning it an id and using getCmp or some other method. if your data is not in int format, you should use JS parseInt function to convert it to int when adding it to total.

21 Oct 2013, 7:26 PM
I think it's a little complicated. I am trying to get all the data of the grid so I can use a loop to get the sum of the staytime. I used this code:

var sel2 = scope.getPlaylistDetailsGrid().data.items;But I get this error:
Uncaught TypeError: Cannot read property 'items' of undefined

22 Oct 2013, 12:19 AM
the data is in the store not in the grid. after you call the method to get your grid, call getStore() and then use .data.items or you getRange() method of store to get all records and then loop through them.

22 Oct 2013, 1:04 AM
I used this: var sample = scope.getPlaylistDetailsGrid().getStore().data.items; console.log(sample);

But when i try it with console.log i get []

22 Oct 2013, 1:16 AM
use getStore().getRange(). if its an empty array, that means there are no records in your store (could be that the store isnt loaded yet)

22 Oct 2013, 1:22 AM
I think the case is the store is not loaded yet, is there any way where it will get the time after the store is loaded?

22 Oct 2013, 1:27 AM
You can add a listener for the load event of your store. I would strongly recommend that you take a look at the documentation (http://docs.sencha.com/extjs/4.2.1/) first and the examples. if you ask each question on the forum, it will take you forever to get the task done...

store.on('load', function() {
// store has been loaded now and you can call your function(s) here to work with the data.