0

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

       ]
     }
   ]}

});

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は、アイテムの 1 つで参照しているため、ストアへのフル パスである必要があります。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 に答える