PDA

View Full Version : Add data to store on button click event and bind it to store



v221919
12 Apr 2012, 4:25 AM
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
12 Apr 2012, 6:34 AM
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
12 Apr 2012, 7:21 AM
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
12 Apr 2012, 7:59 AM
For the button:



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


Regards,
Scott.

v221919
12 Apr 2012, 8:15 PM
In my example I can see alert "hi".
I want to know how to add data to store on button click event?

scottmartin
13 Apr 2012, 5:34 AM
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
3 Nov 2012, 3:06 AM
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");
}
}
}
});
}