CODEWITHSUNDEEP
javascriptextjsextjs5sencha-architect
Soham Shah
Soham Shah

Reputation: 571

Ext JS - Validating a TextField

I am a newbie to Ext JS so I need som ehelp in validating a text field.

Requirement is that user clicks on Add button and a new window shows up. This new windown will have two text fields ID and Name. USer can give any input in Name fild. But ID should not be the ID whihc is present in PLStore.

I know I need to use validator but how to iterrate through PlStore value?

{xtype: 'form',
            bodyPadding: 10,
            title: '',
            items: [
                {
                    xtype: 'textfield',
                    store: 'PLStore',
                    anchor: '100%',
                    fieldLabel: 'ID'
                },
                {
                    xtype: 'textfield',
                    anchor: '100%',
                    fieldLabel: 'Name'
                },

PLStore contains following XML:

<?xml version="1.0" encoding="utf-8"?>
<Rowsets CachedTime="" DateCreated="2015-06-29T06:30:24" EndDate="2015-06-29T06:30:24" StartDate="2015-06-29T05:30:24" Version="15.0 SP4 Patch 4 (Jun 3, 2015)">
    <Rowset>

        <Row>
            <PLName>CA</PLName>
            <PLID>1001</PLID>
        </Row>
<Row>
            <PLName>VA</PLName>
            <PLID>1002</PLID>
        </Row>
<Row>
            <PLName>MH</PLName>
            <PLID>1003</PLID>
        </Row>

    </Rowset>
</Rowsets>

So if user puts ID as 1001, 1002 or 1003 - an error should pop up.

How to go about it?

Thanks in advance !

Upvotes: 0

Views: 1578

Answers (1)

Clayton Donahue
Clayton Donahue

Reputation: 151

If you're using Ext > 4.0ish, you're on the right track with the validator property. You should be able to set this to a custom function, and do your validation within that. In order to check against the store, one option would be to assign that store a storeId so that you can get a reference to it for validation purposes. So, your "id" field config might look something like:

{
    xtype: 'textfield',
    anchor: '100%',
    fieldLabel: 'ID',
    validator: function(fieldVal) {
        var ds = Ext.getStore('myStoreId'),
            ix = ds.find('id', fieldVal);
        return ix < 0;
    }
}

Where 'myStoreId' is the "storeId" you have assigned your data store, and "id" is assumed to be the id of the field we're looking for.

It's been a little while since I've worked with the framework, so docs here in case I've missed something in the syntax:

http://docs.sencha.com/extjs/4.2.3/#!/api

Hope this helps!

Upvotes: 3

Related Questions