Question

我创建了一个包含2个文本字段和按钮的表单。我想在用户单击按钮时将文本字段值放在列表视图中。所以我为它创建了一个模型和商店。我的列表视图代码也在主视图中。但我在列表视图中添加记录时遇到问题。它仅添加List中的当前记录。它不会将商店中的记录呈现到List中，我点击刷新按钮但列表显示为空。这意味着数据未正确存储。你能告诉我在我的代码中我做错了什么吗？

型号

   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'
       }

       ]
     }
   ]}

});

MyController.js

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);

}
});

Answer 1

我在代码中看到了几个可疑区域。

你应该给你的商店storeId。这将允许您使用控制器中的Ext.getStore()找到它。

您的 Main.js 应该require商店的完整路径，因为您在其中一件商品中引用了商店。

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

最后，如上所述，在您的控制器中使用新的storeId来获取商店。

var store1 = Ext.getStore('newStoreId')

尝试一下，然后告诉我你的想法。

运行代码时，在var store1 = Ext.getStore('..')设置断点以确保获得商店，并在添加元素时单步执行。在sync()之后，您应该能够在商店中看到您的新商品。

存储未使用sencha在List中呈现

1 个答案: