0

我创建了一个带有 2 个文本字段和按钮的表单。当用户单击按钮时，我想将文本字段值放在列表视图中。所以我为它创建了一个模型和存储。我的列表视图代码也在主视图中。但我在列表视图中添加记录时遇到问题。它仅在 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'
  } 
}


});

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

}
});
4

1 回答 1

0

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

首先你应该给你的商店一个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()您应该能够在商店中看到您的新商品。

于 2013-11-15T00:03:08.800 回答