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