Check and limit the value.

[maecy]

Okay, I have this grid (see pic. below)

gridsample.png

and this code for method:

createPlaylist:function(record){
        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(date);
        scope.getTimeCount().setValue(timec)
        
        Ext.Service.invoke(
            'PlaylistManager',
            'saveplaylistdetails',
            [user.id,filename,transition,time,date,playlistid],
            function(p){
                console.log('eto ang p',p)
                if(p.success){                        
            
                
                    console.log('pasok');
                
                }else{
                    Ext.Msg.alert('Error','Check your inputs.');
                    scope.getPlaylistDetailsGrid.show().center();
                    
    
                }
            });
    
        },

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!

[Farish]

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.

http://docs.sencha.com/extjs/4.2.1/#...r-cfg-maxValue

[maecy]

gridsample.png

this is where the user inputs the stay time.

this is my code:

Ext.ns('dlti.view.widget');
//Customer Maintenance Form popup
Ext.define('dlti.view.widget.ThumbnailPopup',{
	extend: 'Ext.Window',
	id: 'dlti-thumbnail-popup',
	alias: 'widget.ThumbnailPopup',
	plain: true,
	modal: true,
	draggable:false,
	closable: false,
	resizeable: false,
	layout: 'fit',


	title: 'Create Playlist',
	width: 500,
	align: 'center',
	
	
	
	
		items: {
			xtype:'form',
			id: 'thumbnail-window',
			bodyPadding: 10,
			bodyBorder: true,
			allowBlank: false,
						
			
					
		items: [
				
				{
					xtype: 'ShowImages',
					
				},
				{
					xtype: 'combo',
					id:'transition',
					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}
						
					]	
					


					
});

[Farish]

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.

[maecy]

No, I need the summation of all the value of the staytime, the summation is the one who's not allowed to exceed 30.

[Farish]

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.

[maecy]

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

[Farish]

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.

[maecy]

I used this: var sample = scope.getPlaylistDetailsGrid().getStore().data.items; console.log(sample);

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

[Farish]

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)