Add data to store on button click event and bind it to store

[v221919]

Below is my code I want to add the data in textfield to the store and bind it to the grid.
This should happen when i click on button..



Ext.create('Ext.data.Store', {
storeId:'dataStore',
fields:['name', 'lastname', 'dob', 'email', 'Mobile'],
data:[
{name:"Michael", lastname:"Scott",dob:"4/12/2012"},
{name:"Dwight", lastname:"Schrute"},
{name:"Jim", lastname:"Halpert"}


]
});


Ext.application({
name: 'app',
launch: function () {
Ext.define('MyApp.view.ui.MyWindow', {
extend: 'Ext.window.Window',


height: 505,
width: 462,
title: 'My Window',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 270,
padding: 5,
bodyPadding: 10,

title: 'My Form',
items: [
{
xtype: 'textfield',
id: 'txtnm',
fieldLabel: 'Name',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'textareafield',
id: 'txtadd',
fieldLabel: 'Address',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'datefield',
id: 'dtDob',
fieldLabel: 'DOB',
allowBlank: false,
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtemail',
fieldLabel: 'Email',
allowBlank: false,
vtype: 'email',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtmob',
fieldLabel: 'Mobile no',
allowBlank: false,
maskRe: /[0-9]/,
maxLength: 10,
minLength: 10,
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtpwd',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false,
anchor: '100%'
}
]
},
{
xtype: 'button',
id: 'btnSubmit',
margin: '0 0 5 200',
text: 'Submit',
listeners:
{
click : function()
{
alert("hi");
dataStore.add( new record
({

name:"abcd"





}) );
}
}

},
{
xtype: 'gridpanel',
height: 174,
padding: 5,
width: 450,
title: 'My Grid Panel',
store: Ext.data.StoreManager.lookup('dataStore'),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'String'
},
{
xtype: 'gridcolumn',
dataIndex: 'lastname',
text: 'String'
},
// {
// xtype: 'numbercolumn',
// dataIndex: 'number',
// text: 'Number'
// },
{
xtype: 'datecolumn',
dataIndex: 'dob',
text: 'Date'
}
],
viewConfig: {


}
}
]
});


me.callParent(arguments);
}
});




var win = Ext.create('MyApp.view.ui.MyWindow');
win.show();
}
});

[scottmartin]

Have a look at this example and see if this helps:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/writer/writer.html

Regards,
Scott.

[v221919]

As i am new to ext js, I am not getting the script.
I want some simple example
I add the lines on button click event but data is not reflect on grid
listeners:
{
click : function()
{
alert("hi");
dataStore.add({name: 'data'}, {lastname: 'other data'});

}
}

[scottmartin]

For the button:



items: [{
xtype: 'button',
handler: function(){
alert('hello');
}
}]


Regards,
Scott.

[v221919]

In my example I can see alert "hi".
I want to know how to add data to store on button click event?

[scottmartin]

This is detailed in the API docs:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-add
myStore.add({field1: 'data',field2: 'data1'}, {field1: 'other data', field2: 'other data2'});

If the grid is tied to the store, it will display the new record.
As shown in this example where the record is defined, then insert is used
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/cell-editing.js

Regards,
Scott.

[shilpa1931990]

i am learning extjs. i have view form with two fields as Question and option. When user enters these values,then that values need to be get inserted into store on buttonclick. But data is not getting inserted into store. So can you please help me. i have view form with code as-


Ext.create('Ext.form.Panel', {
title: 'Question-option',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),

// initComponent: function(){
items: [{
xtype: 'textfield',
name: 'Question',
fieldLabel: 'Question',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 'Option',
fieldLabel: 'Option',
vtype: 'Option' // requires value to be a valid email address format
},
{
xtype:'button',
text:'Save',

}
}],

});



I had created model as-


Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['Question', 'Option']
});


I have localstorageProxy as-


Ext.define('AM.store.Users', {
extend:'Ext.data.Store', {
model: 'AM.model.User',
proxy: {
type: 'localstorage',
// id : 'twitter-Searches'
}
}
autoLoad: true
});


And i am having controller with-


Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List',
// 'user.Grid'
],
store: ['Users'],
model: ['User'],


init: function() {
this.control({
'button': {
click: function() {
//Ext.Msg.alert('Boo', 'Here I am');

var form = button.up('form').getForm ();
Validate the form
if (form.isValid ()) {
var values = form.getFieldValues ();
store.add ({
Question: values.Question ,
Option: values.Option
});
}
else {
alert("Insert values in textfields");
}
}
}
});
}