how to get necessary records from ExtJs Store

Question

I have a store which contains lots of records. Suppose I have students information in store.

I need those students whose age 10 years.

I am trying Following:

var age = new Ext.ux.Multiselect({
    valueField: 'LookupId',
    fieldLabel: 'Student Age',
    store: responsibleAgeLevel.getStore(),
    width: 180,
    height: 82
});

The Problem is it returns age of all students. I want to load only for age 10 years.

Answer 1

For this you can use filter method of store or you can also use array.filter to get some necessary records.

Here is FIDDLE, I have created a demo using store and grid. I hope this will help/guide you to achieve your requirement.

*This another FIDDLE in latest version. You can also check here for the same.

CODE SNIPPET

Ext.onReady(function() {
    var studentData = '[{"name":"Clever Juice","age":8},{"name":"Incomparable Boat","age":14},{"name":"Great Skin","age":23},{"name":"Chief Leave","age":8},{"name":"Excited Leather","age":17},{"name":"Darling News","age":5},{"name":"Enchanted Set","age":20},{"name":"Palatable Share","age":16},{"name":"Numb Strength","age":11},{"name":"Weighty Jury","age":21},{"name":"Prickly Burn","age":5},{"name":"Outrageous Obligation","age":23},{"name":"Virtual Oil","age":7},{"name":"Front Swim","age":5},{"name":"Moral Hold","age":15},{"name":"Gracious Neat","age":22},{"name":"Formal Month","age":23},{"name":"Delayed Reference","age":9},{"name":"Pastel Design","age":9},{"name":"Husky Doctor","age":7},{"name":"Posh Arrival","age":14},{"name":"Coarse Woman","age":8},{"name":"Heavenly Condition","age":9},{"name":"Frizzy Rent","age":18},{"name":"Advanced Tale","age":21},{"name":"Tattered Fat","age":16},{"name":"Clumsy Bitter","age":10},{"name":"Hefty Beer","age":22},{"name":"Personal Math","age":18},{"name":"Loud Dream","age":13},{"name":"Poised Family","age":6},{"name":"Serpentine Response","age":18},{"name":"Short Shoe","age":21},{"name":"Used Operation","age":14},{"name":"Downright Normal","age":14},{"name":"Disastrous Copy","age":11},{"name":"Dopey Duty","age":13},{"name":"Cute Gold","age":17},{"name":"Qualified Guess","age":6},{"name":"Unaware Crash","age":16},{"name":"Ugly Complex","age":14},{"name":"Indelible Secret","age":13},{"name":"Needy Base","age":22},{"name":"Dependable Site","age":15},{"name":"Flippant Word","age":5},{"name":"Whopping Attention","age":14},{"name":"Frozen Coach","age":12},{"name":"Grounded Boyfriend","age":21},{"name":"Overdue Efficiency","age":23},{"name":"Rocky Complex","age":21},{"name":"Weepy Death","age":20},{"name":"All Bird","age":11},{"name":"Recent Switch","age":17},{"name":"Jaded Boss","age":11},{"name":"Distinct Light","age":7},{"name":"Digital Contract","age":8},{"name":"Exalted Deep","age":22},{"name":"Sick Spiritual","age":16},{"name":"Pitiful Contribution","age":9},{"name":"Silent Invite","age":17},{"name":"Fuzzy Joint","age":23},{"name":"Clean Efficiency","age":7},{"name":"Prize Luck","age":17},{"name":"Idiotic Ground","age":17},{"name":"Incomplete Switch","age":16},{"name":"Sturdy Bite","age":10},{"name":"Snappy Ability","age":10},{"name":"Animated Fortune","age":9},{"name":"Ample Lead","age":9},{"name":"Joint Grade","age":15},{"name":"Dirty Mine","age":17},{"name":"Incompatible Plate","age":7},{"name":"Delayed Hearing","age":6},{"name":"Apt Survey","age":6},{"name":"Dismal Failure","age":7},{"name":"Same Sensitive","age":21},{"name":"Dreary Carpet","age":17},{"name":"Immense Independence","age":7},{"name":"Unkempt Respond","age":13},{"name":"Energetic Radio","age":11},{"name":"Right Shot","age":21},{"name":"Windy Sky","age":8},{"name":"Unsteady Marketing","age":13},{"name":"Unwieldy Kind","age":20},{"name":"Loose Intention","age":20},{"name":"Warped District","age":21},{"name":"Creative Storm","age":19},{"name":"Scrawny Hire","age":23},{"name":"Alert Negotiation","age":12},{"name":"Foolish Bend","age":16},{"name":"Thirsty Chart","age":20},{"name":"Sleepy Ideal","age":15},{"name":"Spherical Story","age":7},{"name":"Lovely Face","age":12},{"name":"Frosty Purple","age":6},{"name":"Illiterate Damage","age":8},{"name":"Wretched King","age":15},{"name":"Meager Length","age":10},{"name":"Second Relationship","age":16},{"name":"Mammoth Bid","age":5},{"name":"Quiet Buyer","age":11},{"name":"Well-off Towel","age":14},{"name":"Useless Number","age":8},{"name":"Unique Smile","age":14},{"name":"Athletic Excuse","age":11},{"name":"Educated Refrigerator","age":22},{"name":"Lone Cake","age":20},{"name":"Short Cow","age":21},{"name":"Lanky Doubt","age":22},{"name":"Husky Heat","age":16},{"name":"Fuzzy Stranger","age":5},{"name":"Infantile Meet","age":13},{"name":"Imperturbable Cake","age":11},{"name":"Serpentine Suspect","age":7},{"name":"Sturdy Morning","age":9},{"name":"Alert Brilliant","age":14},{"name":"Past Anxiety","age":22},{"name":"Right Inflation","age":21},{"name":"Spanish Paper","age":12},{"name":"Front Stretch","age":23},{"name":"Forceful Hit","age":8},{"name":"Admired Impress","age":20},{"name":"Blue Oven","age":17},{"name":"Official Sample","age":8},{"name":"Silent Category","age":18},{"name":"Pleased Soft","age":13},{"name":"Pertinent Tune","age":11},{"name":"Thick Sock","age":9},{"name":"Testy Expert","age":10},{"name":"Crisp Satisfaction","age":12},{"name":"Fair Entry","age":15},{"name":"Trifling Ideal","age":23},{"name":"Lame Concept","age":14},{"name":"Novel Rough","age":5},{"name":"Monstrous Ladder","age":14},{"name":"Understated Capital","age":13},{"name":"Repentant Feeling","age":23},{"name":"Terrible Report","age":19},{"name":"Bogus Ambition","age":20},{"name":"Stark Feel","age":8},{"name":"Unruly Enthusiasm","age":22},{"name":"Giant Junior","age":10},{"name":"Anchored Army","age":17},{"name":"Damp Luck","age":7},{"name":"Joyful Draft","age":6},{"name":"Miserable Criticism","age":15},{"name":"Uneven Formal","age":7},{"name":"Eminent Group","age":13},{"name":"Ruddy Discussion","age":5},{"name":"Unlucky Interest","age":17},{"name":"Tiny Dig","age":10},{"name":"Growling Candy","age":5},{"name":"Unripe Operation","age":9},{"name":"Perfect Priest","age":23},{"name":"Gullible Official","age":20},{"name":"Rare Impress","age":14},{"name":"Occasional Estimate","age":16},{"name":"Truthful Opposite","age":12},{"name":"Vapid Wrap","age":13},{"name":"Beneficial War","age":16},{"name":"Venerated Signal","age":11},{"name":"Prize Sugar","age":9},{"name":"Knowledgeable Category","age":10},{"name":"Grumpy Result","age":9},{"name":"Oily Atmosphere","age":16},{"name":"This Can","age":17},{"name":"Unnatural Corner","age":11},{"name":"Youthful System","age":9},{"name":"Abandoned Sort","age":7},{"name":"Perfect Employer","age":18},{"name":"Upset Girl","age":13},{"name":"Far Apartment","age":15},{"name":"Pristine Solid","age":20},{"name":"Suburban Incident","age":22},{"name":"Positive Blue","age":13},{"name":"Regular Research","age":9},{"name":"Slushy Growth","age":18},{"name":"Rundown Reality","age":18},{"name":"Oblong Understanding","age":20},{"name":"Wrong Spell","age":6},{"name":"Organic Resist","age":17},{"name":"Low Pause","age":6},{"name":"Utilized White","age":15},{"name":"Lean Test","age":14},{"name":"Helpless Judge","age":6},{"name":"Apprehensive Trainer","age":17},{"name":"Precious Animal","age":20},{"name":"Nervous Historian","age":5},{"name":"Infamous Stuff","age":20},{"name":"Qualified Tomorrow","age":7},{"name":"Tough Band","age":18},{"name":"Brisk Employment","age":8},{"name":"Tough Tower","age":15},{"name":"Smug Illegal","age":5},{"name":"Frosty Eat","age":6},{"name":"Heavy Gene","age":21},{"name":"Frugal Street","age":11},{"name":"Gaseous Chicken","age":20},{"name":"Disastrous Response","age":13},{"name":"Rural Crash","age":6},{"name":"Polished Appeal","age":9},{"name":"Tremendous Door","age":22},{"name":"Zany Excuse","age":15},{"name":"Defenseless Fan","age":12},{"name":"Acrobatic Chemistry","age":6},{"name":"Staid Respect","age":13},{"name":"Raw Condition","age":14},{"name":"Smooth Boyfriend","age":21},{"name":"Hasty Store","age":15},{"name":"Milky Mark","age":15},{"name":"Familiar Vehicle","age":6},{"name":"Mature Fight","age":8},{"name":"Difficult Sister","age":18},{"name":"Profuse Aside","age":6},{"name":"Crowded Concern","age":14},{"name":"Extraneous Childhood","age":16},{"name":"Petty Chemistry","age":6},{"name":"Quaint Image","age":18},{"name":"Funny Ear","age":16},{"name":"Irresponsible Evidence","age":23},{"name":"Woozy Device","age":17},{"name":"Beloved Dependent","age":14},{"name":"Knobby Spirit","age":9},{"name":"Ill-fated Dare","age":7},{"name":"Hefty Register","age":15},{"name":"Solid Press","age":10},{"name":"Monumental Shift","age":8},{"name":"Marvelous Energy","age":20},{"name":"Pointed Bend","age":17},{"name":"Luxurious Kitchen","age":17},{"name":"Terrific Complaint","age":5},{"name":"Triangular Computer","age":15},{"name":"Old People","age":13},{"name":"Lucky Assignment","age":6},{"name":"Scratchy Estate","age":17},{"name":"Organic Panic","age":12},{"name":"Calm Attention","age":8},{"name":"True Agreement","age":10},{"name":"Jam-packed Monitor","age":18},{"name":"Shady Lock","age":21},{"name":"Meek Energy","age":7},{"name":"All Birth","age":9},{"name":"Energetic Local","age":5},{"name":"Questionable Adult","age":18},{"name":"Pristine Claim","age":16},{"name":"Nasty Context","age":22},{"name":"Frosty Hang","age":6},{"name":"Dreary Charity","age":7},{"name":"Queasy Rest","age":21},{"name":"Serpentine Road","age":13},{"name":"Well-informed Finance","age":5},{"name":"Neighboring Mirror","age":21},{"name":"Thick Sand","age":13},{"name":"Negligible Problem","age":19},{"name":"Puny Claim","age":10},{"name":"Skinny Concentrate","age":7},{"name":"Willing Cup","age":10},{"name":"Ornery White","age":20},{"name":"Absolute Comment","age":8},{"name":"Hilarious Schedule","age":21},{"name":"Well-off Finish","age":15},{"name":"Scarce Supermarket","age":6},{"name":"Watery Mind","age":5},{"name":"Easy-going Development","age":8},{"name":"Vivacious Back","age":12},{"name":"Metallic Section","age":6},{"name":"Massive Mission","age":22},{"name":"Vicious Beer","age":18},{"name":"Wiry Suspect","age":7},{"name":"Glaring Secret","age":13},{"name":"Insubstantial Name","age":14},{"name":"Wary Golf","age":9},{"name":"Ecstatic Shame","age":10},{"name":"Dull Appeal","age":9},{"name":"Neglected Branch","age":13},{"name":"Plain Dress","age":9},{"name":"Vibrant Cut","age":9},{"name":"Official Knowledge","age":18},{"name":"Blue Outcome","age":16},{"name":"Babyish Consist","age":23},{"name":"Vicious Project","age":9},{"name":"Wry Cousin","age":14},{"name":"Astonishing Lay","age":15},{"name":"Wild Wheel","age":5},{"name":"Legitimate Item","age":6},{"name":"Candid Comment","age":6},{"name":"Glaring Blame","age":16},{"name":"Creative Flow","age":9},{"name":"Jubilant Imagination","age":19},{"name":"Dependable Price","age":21},{"name":"Fluid Structure","age":18},{"name":"Parallel Space","age":21},{"name":"Overjoyed Development","age":9},{"name":"Super Produce","age":6},{"name":"Slight Studio","age":20},{"name":"Costly Impression","age":11},{"name":"Defensive Gap","age":20},{"name":"Knowing Refrigerator","age":23},{"name":"Fortunate Term","age":5},{"name":"Sugary Office","age":15},{"name":"Unlucky Mind","age":5},{"name":"Classic Illegal","age":10},{"name":"Queasy Lake","age":23},{"name":"Self-assured Love","age":20},{"name":"Careless Back","age":18},{"name":"Intrepid Membership","age":11},{"name":"Cumbersome Parking","age":6},{"name":"Pesky Sleep","age":13},{"name":"Wavy Driver","age":18},{"name":"Untried Credit","age":21},{"name":"Mixed Spring","age":22},{"name":"Profitable Struggle","age":9},{"name":"Anguished Winner","age":7},{"name":"Watery Local","age":10},{"name":"Cheery Child","age":6},{"name":"Handsome Ratio","age":22},{"name":"Humiliating Sail","age":15},{"name":"Weepy Order","age":6},{"name":"Slight Anxiety","age":21},{"name":"Wiry Truck","age":20},{"name":"Attractive Character","age":13},{"name":"Wide-eyed Bench","age":19},{"name":"Gracious Mud","age":7},{"name":"Tangible Dust","age":17},{"name":"Terrific Anger","age":10},{"name":"Formal Cost","age":6},{"name":"Tubby Failure","age":16},{"name":"Limited Pull","age":20},{"name":"Shy Concern","age":10},{"name":"Hilarious Body","age":7},{"name":"Deep Air","age":7},{"name":"Reflecting Lake","age":11},{"name":"Lively Spring","age":20},{"name":"Silky Candy","age":9},{"name":"Tense Activity","age":10},{"name":"Qualified Language","age":22},{"name":"Lucky Gift","age":16},{"name":"Arctic Potato","age":6},{"name":"Monstrous Tone","age":6},{"name":"Ready Age","age":18},{"name":"Black-and-white Order","age":20},{"name":"Famous Chain","age":19},{"name":"Ashamed Wall","age":16},{"name":"Sure-footed Recommendation","age":9},{"name":"Prestigious Light","age":19},{"name":"Warped Target","age":5},{"name":"Boring Cow","age":20},{"name":"Alarming Dead","age":7},{"name":"Hoarse Campaign","age":8},{"name":"Agreeable Pen","age":21}]',
        //field for model    
        fileds = [{
            name: 'name',
            type: 'string',
            convert: function(v, r) {
                return r.name;
            }
        }, {
            name: 'age',
            type: 'int',
            convert: function(v, r) {
                return r.age;
            }
        }],
        // create the data store
        store = new Ext.data.SimpleStore({
            fields: fileds
        }),
        store1 = new Ext.data.SimpleStore({
            fields: fileds
        });

    //Decode the student data
    studentData = Ext.decode(studentData);

    store.loadData(studentData);

    //Add data into store only those stuent have age 10;
    //using array filter method
    store1.loadData(studentData.filter(function(obj) {
        return obj.age == 10;
    }));

    /*
     *  We can also use store.filter('age',10)
     *  This method will only show those student have age 10
     */
    new Ext.Container({
        autoEl: {},
        renderTo: document.body,
        layout: 'column',
        defaults: {
            xtype: 'grid',
            columns: [{
                header: 'Name',
                id: 'name',
                dataIndex: 'name'
            }, {
                header: 'Age',
                dataIndex: 'age',
                width: 50
            }],
            stripeRows: true,
            autoExpandColumn: 'name',
            height: 350,
            width: '50%'
        },
        items: [{
            title: 'Student All data',
            store: store
        }, {
            title: 'Student data students whose age 10 years',
            store: store1
        }]
    });
});