Extjs 未使用sencha在列表中呈现存储

我已经创建了一个带有2个文本字段和按钮的表单。我想在用户单击按钮时将文本字段值放在列表视图中。所以我为它创建了一个模型和存储。我的列表视图代码也在主视图中。但我在列表视图中添加记录时遇到了一个问题。它只在列表中添加当前记录。它不会将存储区中的记录呈现到列表中，我单击“刷新”按钮，但列表显示为空。这意味着数据没有正确存储。你能告诉我我的代码哪里做错了吗

型号

   Ext.define("panellist.model.User",{
      extend:'Ext.data.Model',
      config:
        {

         fields:
         [
           {name:'name',type:'string'},
           {name:'add',type:'string'}
         ]

        }

    });

商店

Ext.define("panellist.store.Company",
{
   extend:'Ext.data.Store',
  config:
 {
       model:'panellist.model.User',
       autoload:true,
  proxy:
  {
        type:'localstorage',
        id:'mypanellist'
  } 
}


});

Main.js

 Ext.define('panellist.view.Main',
   {
        extend: 'Ext.Container',
        xtype: 'main',
        id:'mainview',
    requires: 
    [
       'Ext.TitleBar',
       'Ext.Panel',
       'Ext.List',
       'Ext.data.proxy.LocalStorage'
    ],

    config: 
    {
     items:
    [
       {
         xtype:'titlebar',
         title:'welcome to sencha touch',
         docked:'top',

      },
      {

       xtype:'list',
       width:'100%',
       height:'100%',
       itemTpl:'{name},{add}',  
       store:"Company"

      },
      {
        xtype:'titlebar',
        docked:'bottom',

        items:
        [
        {
           xtype:'textfield',
           lablel:'enter the name',
           value:'enter the name',
           id:'t1',
           name:'txtname'
       },
       {
           xtype:'spacer',
       },
       {
           xtype:'textfield',
           value:'enter the address',
           name:'txtadd',
           id:'t2',
       },
       {
           xtype:'spacer',
       },

       {
           xtype:'button',
           text:'Add',
           action:'btnadd'
       }

       ]
     }
   ]}

});

var mdl=Ext.create('panellist.model.User');

Ext.define("panellist.controller.MyController",
{
             extend:'Ext.app.Controller',
config:
{
         refs:
        {
            // pass the id of the view
            nav:'#mainview'
         }


},
init:function()
{
              console.log("init is callled");
this.control({
'button[action=btnadd]':
 {
              tap:'insertrecords'
 }

});
},

launch:function()
{
           console.log("launch is callled");
},
insertrecords:function()
{
// fetch the records from field

var n=Ext.getCmp('t1').getValue();
var a=Ext.getCmp('t2').getValue();
// first store this values in model

mdl.set("name",n);
mdl.set("add",a);
// add model into the store
var store1=Ext.getStore("Company");

store1.add(mdl);
store1.sync();

console.log('records is added');


console.log(n);

}
});

MyController.js

 Ext.define('panellist.view.Main',
   {
        extend: 'Ext.Container',
        xtype: 'main',
        id:'mainview',
    requires: 
    [
       'Ext.TitleBar',
       'Ext.Panel',
       'Ext.List',
       'Ext.data.proxy.LocalStorage'
    ],

    config: 
    {
     items:
    [
       {
         xtype:'titlebar',
         title:'welcome to sencha touch',
         docked:'top',

      },
      {

       xtype:'list',
       width:'100%',
       height:'100%',
       itemTpl:'{name},{add}',  
       store:"Company"

      },
      {
        xtype:'titlebar',
        docked:'bottom',

        items:
        [
        {
           xtype:'textfield',
           lablel:'enter the name',
           value:'enter the name',
           id:'t1',
           name:'txtname'
       },
       {
           xtype:'spacer',
       },
       {
           xtype:'textfield',
           value:'enter the address',
           name:'txtadd',
           id:'t2',
       },
       {
           xtype:'spacer',
       },

       {
           xtype:'button',
           text:'Add',
           action:'btnadd'
       }

       ]
     }
   ]}

});

var mdl=Ext.create('panellist.model.User');

Ext.define("panellist.controller.MyController",
{
             extend:'Ext.app.Controller',
config:
{
         refs:
        {
            // pass the id of the view
            nav:'#mainview'
         }


},
init:function()
{
              console.log("init is callled");
this.control({
'button[action=btnadd]':
 {
              tap:'insertrecords'
 }

});
},

launch:function()
{
           console.log("launch is callled");
},
insertrecords:function()
{
// fetch the records from field

var n=Ext.getCmp('t1').getValue();
var a=Ext.getCmp('t2').getValue();
// first store this values in model

mdl.set("name",n);
mdl.set("add",a);
// add model into the store
var store1=Ext.getStore("Company");

store1.add(mdl);
store1.sync();

console.log('records is added');


console.log(n);

}
});

---

我在你的代码中看到几个可疑区域

首先，你应该给你的商店一个

storeId

。这将允许您使用控制器中的

Ext.getStore（）

找到它

你的Main.js应该

要求你的商店的完整路径，因为你在你的一个商品中引用了它

requires: 
    [
       'Ext.TitleBar',
       'Ext.Panel',
       'Ext.List',
       'Ext.data.proxy.LocalStorage',
       'panellist.store.Company'      // <~ added 
    ],

试试看，告诉我你想到了什么

运行代码时，在
var store1=Ext.getStore（“..”）
处设置断点以确保获得存储，并在添加元素时逐步执行。在
sync（）
之后，您应该能够在商店中看到您的新商品