CODEWITHSUNDEEP
javascriptextjs
chnselim
chnselim

Reputation: 254

How to load a part of store into a grid

Ext JS 5.1

I have a student management system, and 4 classes from 1th to 4th. All classes have 4 courses each. I called all courses to grid but I want to call only courses that have same class with the student. (e.g I'm on 4th class so I can see only 4th class courses on grid)

I just want to part of code like this if it is possible:

    if (refs.txtClass.value === refs.lesClass.value){

       // load the grid that only equals txtClass.value
       // txtClass is Class No of a student, lesClass is Class No of grid

    }

Student's Class Reference

items: [{
         xtype: 'label',
         flex: 1,
         reference: 'txtClass'
        }]

Grid Code

items: [
{
    xtype: 'gridpanel',
    flex: 1,
    reference: 'courseList',
    itemId: 'courseList',
    store: 'CourseStore',
    columns: [
        {
            xtype: 'gridcolumn',
            reference: 'lesId',
            itemId: 'lesId',
            dataIndex: 'lesId',
            text: 'DERS KODU'
        },
        {
            xtype: 'gridcolumn',
            reference: 'lesClass',
            itemId: 'lesClass',
            dataIndex: 'lesClass',
            text: 'SINIF'
        },
        {
            xtype: 'gridcolumn',
            reference: 'lesName',
            itemId: 'lesName',
            width: 200,
            dataIndex: 'lesName',
            text: 'DERS ADI'
        },
        {
            xtype: 'gridcolumn',
            reference: 'lesCredit',
            itemId: 'lesCredit',
            dataIndex: 'lesCredit',
            text: 'DERS KREDİSİ'
        },
        {
            xtype: 'gridcolumn',
            reference: 'lesTeacher',
            itemId: 'lesTeacher',
            width: 600,
            dataIndex: 'lesTeacher',
            text: 'OKUTMAN'
        }
    ]
}]

Upvotes: 1

Views: 119

Answers (2)

Balram Maurya
Balram Maurya

Reputation: 164

You can also loadData method of store to load some part of data in store :
    var arr = [],
    store = yourgrid.getStore();
    store.each(function(rec) {
    if (// condition to create the part of data want to be loaded)){
        arr.push(rec);
    }
    store.loadData(arr);

You can also used slice method to store some data on the basis of range store.loadData(oldstoreRecords.slice(start,end);

Upvotes: 1

Saloo
Saloo

Reputation: 816

If you have loaded all data locally , you can then filter on store based on the condition.

filterBy ( fn , [scope] )
Filters by a function. The specified function will be called for each Record in this Store. If the function returns true the Record is included, otherwise it is filtered out. When store is filtered, most of the methods for accessing store data will be working only within the set of filtered records. The notable exception is getById.

store.filterBy(function() 
{
if (refs.txtClass.value === refs.lesClass.value){
        return true;
    }
    else {
        return false;
    }
},this);

You can also make use of filters config on the store.

 filters: [
    function(item) {
        //condition here
    }
]

Upvotes: 2

Related Questions