1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    38
    Answers
    1
    Vote Rating
    0
    zeeshanjeelani is on a distinguished road

      0  

    Default Answered: How can I add store to this grid

    Answered: How can I add store to this grid


    I am using sencha arhcitect generated code, I want to declare store under

    HTML Code:
    Ext.define('holiday', { extend: 'Ext.window.Window',

    Here is the code
    HTML Code:
    Ext.define('holiday', {
     extend: 'Ext.window.Window',
     
     
    height: 430,
    width: 700,
    resizable:false,
    layout: {
        type: 'fit'
    },
    modal: true,
    title: 'Holidays',
    id:'depHolidays',
     
     
       items: [
      
    {
    xtype: 'tabpanel',
    frame: true,
    id:'holidayTabPanel',
    activeTab: 0,
    items: [
      
     { 
         
          //*****************************************************Add Holidays 
        xtype: 'panel',
        frame: true,
        height: 220,
        title: 'Add Holiday',
        iconCls:'addHoliday_img',
        tooltip:'Click to Add Holidays',
      
        dockedItems: [
            {
            xtype: 'toolbar',
            dock: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Clear',
                    iconCls:'clear_img',
                    action:'clearHoliday',
                    tooltip:'Click to Clear entered data',
                    handler:function()
                    {
                   Ext.ComponentQuery.query('#depHolidays')[0].clearHolidayFields();
                   
                    }
                },
                {
                    xtype: 'button',
                    text: 'Delete',
                    iconCls:'del_img',
                    tooltip:'Click to Delete Holiday',
                },
                {
                    xtype: 'button',
                    text: 'Save',
                    iconCls:'save_img',
                    tooltip:'Click to Add Holiday',
                       handler:function()
                    {
                      Ext.ComponentQuery.query('#depHolidays')[0].addHolidays();
                   
                    }
                }
                ]
            }
        ],
      
        items: [
            {
                xtype: 'gridpanel',
                id:'addHolidayGrid',
                height: 200,
                title: '',
                selModel:
                                  {
                                  selType: 'checkboxmodel',
                                  allowDeselect:true,
                                  mode:'MULTI'
                                  },                                                                
                                 
                columns: [
                    {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'Name',
                    width:400,
                    renderer: function(value, p, record){
                             return  Ext.String.format('<b>&nbsp;{0}</b><br/>&nbsp;{1}', value, record.data['descript']);
                             }
                    },
                 
                ],
                viewConfig: {
     
                },
                dockedItems: [
                    {
                        xtype: 'pagingtoolbar',
                        dock: 'bottom',
                        height: 30,
                        width: 360,
                        displayInfo: true
                    }
                ]Ext.define('holiday', {
     extend: 'Ext.window.Window',
     
     
    height: 430,
    width: 700,
    resizable:false,
    layout: {
        type: 'fit'
    },
    modal: true,
    title: 'Holidays',
    id:'depHolidays',
     
     
       items: [
      
    {
    xtype: 'tabpanel',
    frame: true,
    id:'holidayTabPanel',
    activeTab: 0,
    items: [
      
     { 
         
          //*****************************************************Add Holidays 
        xtype: 'panel',
        frame: true,
        height: 220,
        title: 'Add Holiday',
        iconCls:'addHoliday_img',
        tooltip:'Click to Add Holidays',
      
        dockedItems: [
            {
            xtype: 'toolbar',
            dock: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Clear',
                    iconCls:'clear_img',
                    action:'clearHoliday',
                    tooltip:'Click to Clear entered data',
                    handler:function()
                    {
                   Ext.ComponentQuery.query('#depHolidays')[0].clearHolidayFields();
                   
                    }
                },
                {
                    xtype: 'button',
                    text: 'Delete',
                    iconCls:'del_img',
                    tooltip:'Click to Delete Holiday',
                },
                {
                    xtype: 'button',
                    text: 'Save',
                    iconCls:'save_img',
                    tooltip:'Click to Add Holiday',
                       handler:function()
                    {
                      Ext.ComponentQuery.query('#depHolidays')[0].addHolidays();
                   
                    }
                }
                ]
            }
        ],
      
        items: [
            {
                xtype: 'gridpanel',
                id:'addHolidayGrid',
                height: 200,
                title: '',
                selModel:
                                  {
                                  selType: 'checkboxmodel',
                                  allowDeselect:true,
                                  mode:'MULTI'
                                  },                                                                
                                 
                columns: [
                    {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'Name',
                    width:400,
                    renderer: function(value, p, record){
                             return  Ext.String.format('<b>&nbsp;{0}</b><br/>&nbsp;{1}', value, record.data['descript']);
                             }
                    },
                 
                ],
                viewConfig: {
     
                },
                dockedItems: [
                    {
                        xtype: 'pagingtoolbar',
                        dock: 'bottom',
                        height: 30,
                        width: 360,
                        displayInfo: true
                    }
                ]

  2. Can you please specify if you are trying to add a store using the Sencha Architect tool or if you want to simply add it manually?

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Answers
    113
    Vote Rating
    96
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    If you have created a store and assigned it to a variable which is visible to the grid (scope), then you can just use that variables name in the store config of the grid:

    Code:
    store: myStore
    another way is that you assign an id to your store. i.e. in your store, use
    Code:
    storeId: 'MyStoreID'
    and then in the grid, use that id to assign a store to it:

    Code:
    store: Ext.data.StoreManager.lookup('MyStoreID')

  4. #3
    Sencha Premium Member krullj's Avatar
    Join Date
    Sep 2011
    Posts
    35
    Answers
    2
    Vote Rating
    7
    krullj is on a distinguished road

      0  

    Default


    Can you please specify if you are trying to add a store using the Sencha Architect tool or if you want to simply add it manually?

  5. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    38
    Answers
    1
    Vote Rating
    0
    zeeshanjeelani is on a distinguished road

      0  

    Default no not that way.

    no not that way.


    I want to create store manually in the class which is extended from window then assign it to the grid panel,

  6. #5
    Sencha Premium Member krullj's Avatar
    Join Date
    Sep 2011
    Posts
    35
    Answers
    2
    Vote Rating
    7
    krullj is on a distinguished road

      0  

    Default


    After you create the store you can attach it to the grid by using the following method:
    Code:
    // this code assumes you already have store defined and assigned to the "store" variable
    
    var holidayGrid = Ext.ComponentQuery.query('#addHolidayGrid')[0];
    holidayGrid.bindStore(store);
    bindStore() is what allows you to attach a store to a grid after it has been instantiated.

  7. #6
    Sencha User
    Join Date
    Nov 2012
    Posts
    38
    Answers
    1
    Vote Rating
    0
    zeeshanjeelani is on a distinguished road

      0  

    Default instantiating store is the problem

    instantiating store is the problem


    I want to declare a store under this class

    Ext.define('holiday', { extend: 'Ext.window.Window',

    it should be some thing


    Ext.define('holiday', { extend: 'Ext.window.Window', height: 430,width: 700,resizable:false,layout: { type: 'fit'},modal: true,title: 'Holidays',id:'depHolidays',mystore:Ext.create.......


    How should i declare or instantiate store in this class so as the window loads, it will get this store bind.

  8. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    38
    Answers
    1
    Vote Rating
    0
    zeeshanjeelani is on a distinguished road

      0  

    Default Thanks krullj

    Thanks krullj


    thank you for your help.

    I declared a function in that class, and use bindstore method to bind gridpanel with that store.

  9. #8
    Sencha Premium Member krullj's Avatar
    Join Date
    Sep 2011
    Posts
    35
    Answers
    2
    Vote Rating
    7
    krullj is on a distinguished road

      0  

    Default


    Glad to help, zeeshanjeelani. As long as you define the store before your "holiday" class, you should be able to set the store property of the grid to the class name you give the store. In that case you wouldn't need to use bindStore().

Thread Participants: 2