In my JavaScript file I have the following store variable:
Ext.onReady(function() {
var store2 = Ext.create('Ext.data.Store', {
storeId : 'employeeStore',
fields : [ 'firstname', 'lastname', 'age' ],
data : [ {
firstname : "Michael",
lastname : "Scott",
age : "7",
}, {
firstname : "Caroline",
lastname : "Schrute",
age : "2",
}, {
firstname : "Jim",
lastname : "Halpert",
age : "3"
}, {
firstname : "Kevin",
lastname : "Malone",
age : "4",
}, {
firstname : "Angela",
lastname : "Martin",
age : "5",
} ]
});
and a couple lines after in my panel i have a couple of form fields:
Ext.create('Ext.form.Panel', {
title : 'Person Info',
labelWidth : 75,
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 900,
renderTo : Ext.getBody(),
layout : 'column',
// arrange fieldsets side by side
items : [
{
// ***** Person Info*****
// Fieldset in Column 1 - collapsible via toggle button
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Person Details',
collapsible : true,
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
layout : 'anchor',
items : [
{
fieldLabel : 'First Name:',
name : 'PersonFirstName'
},
{
fieldLabel : 'Last Name:',
name : 'PersonLastname'
}
(etc...)
In this panel I also have a button that is suppose the store the values into a grid when clicked
{
text : 'Add Person',
xtype : 'button',
// margin: '0 0 0 100',
formBind : true,
// only enabled once the form is valid
disabled : true,
handler : function() {
// write code to add all fields to the grid
var form = this.up('form').getForm();
var vals = form.getValues();
store2.add(vals);
}
},
{
xtype : 'grid',
title : 'Family Details',
store : Ext.data.StoreManager.lookup('employeeStore'),
columns : [ {
text : 'First Name',
dataIndex : 'firstname',
type : 'string'
}, {
text : 'Last Name',
dataIndex : 'lastname',
type : 'string'
}, {
text : 'Age',
dataIndex : 'age',
type : 'string',
}, ],
width : 400,
forceFit : true,
renderTo : Ext.getBody()
} ]
When I press the button I'm not able to see the values in the grid. It's only returning an empty row.
You might have to add the proxy config to your store and check once.
For more info check this example from sencha here
And also check whether your store is loaded or not.
It's hard to tell where exactly the problem. I would start as following:
Remove from the grid all the columns and stay with only one. (lastname for example)
This step will check if the problem is occurred because mapping data to the state.
When you are clicking the button , use dummy data first in order to see that appending to the store is working.
var objectCollection = new Array();
var objectItem = new Object();
objectItem.lastname = "TestName";
objectCollection.push(objectItem);
store2.loadData(objectCollection);
In addition , I see that you defined values in store , but do not use 'autoLoad' property.
It should populated as true ('autoLoad:true').
Form field names should match with the grid columns data index . in our case form field name of person first name is "name : 'PersonFirstName'" so data index of the grid column Firs name should be "PersonFirstName" or vice versa.
Related
I have Ext Form :
Ext.define('Count.view.AddJListForm', {
extend : 'Ext.form.Panel',
controller : 'List',
xtype : 'add-list',
name : 'addListForm',
cls : 'addFormToolbar',
width : '100%',
height : '100%',
layout : 'hbox',
fullscreen : true,
scrollable : true,
items :
[
{
xtype : 'titlebar',
title : 'Add New Name',
docked : 'top',
},
{
xtype : 'formpanel',
fullscreen : true,
items :
[
{
xtype : 'hiddenfield',
name : 'id'
},
{
xtype : 'textfield',
name : 'ListName',
maxLength : 100,
label : 'List name',
labelAlign : 'top',
required : true
},
{
xtype : 'numberfield',
name : 'Count',
maxLength : 10,
label : 'Count',
labelAlign : 'top',
required : true
},
]
},
{
xtype : 'toolbar',
ui : 'plain',
docked : 'bottom',
items :
[
{
xtype : 'spacer'
},
{
xtype : 'button',
text : 'CANCEL',
name : 'closeAddListFormView',
},
{
xtype : 'button',
text : 'SAVE',
name : 'formSave',
}
]
}
]
});
Controller function :
In this function to get the form values and stored into Database:
Ext.define('Count.view.ListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.JapaList',
control: {
'button[name=formSave]': {
tap : 'saveListData'
}
}
// File save function
saveListData : function(button, record)
{
var form = button.up('formpanel');
var values = form.getValues();
var BgImage = '';
var audioFile = '';
if(form.validate())
{
var ListName = values.ListName;
var Count = values.Count;
callBackSaveData var table = JapaCount.Db.tblJapaList;
toDbArray['ListName'] = ListName;
toDbArray['Count'] = Count;
Count.Db.dbInsertWithCallback(table,toDbArray, me.loadStore, me);
}
data stored on DB. But I need to validate ListName must be unique like a username. if there are any rerecords like the same name it should show an error. In this function were to check that validator or function? anyone have an idea please share
You can find record with ListName using method findRecord on instance of store.
let record = store.findRecord('ListName', ListName, 0, false, false, true);
if (!record) {
//do smth here if ListName not found
}
I have a form, and in the form there are two textfields with diferent itemIds but the same name, because when I call getForm().loadRecord(record) to fill the textfields in the form, only one is with data and the other is empty.
var form=new Ext.form.Panel({
itemId:'form1',
items:[
{
xtype : 'textfield',
fieldLabel :'textfield1',
name : 'value1',
itemId : 'textfield1',
readOnly:true
},
{
xtype : 'textfield',
fieldLabel :'textfield2',
name : 'value1',
itemId : 'textfield2'
}
]
});
The name property can only be used once in the same form to fill two diferent textfields with the same value from store?
I have search in the doc of sencha but didn´t find anything about single use of name or unique name property.
Yes, the name property can only be used once in the same form.
You can set value of second field by using
Ext.ComponentQuery.query('#textfield2')[0].setValue(YourValue);
Try with 'mapping' in model
MODEL:
fields: [
{name: 'value1', type: 'string'},
{name: 'valueSameAs1', type: 'string', mapping: 'value1'}
]
VIEW:
var form=new Ext.form.Panel({
itemId:'form1',
items:[
{
xtype : 'textfield',
fieldLabel :'textfield1',
name : 'value1',
itemId : 'textfield1',
readOnly:true
},
{
xtype : 'textfield',
fieldLabel :'textfield2',
name : 'valueSameAs1',
itemId : 'textfield2'
}
]
});
Take a look at:
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Field-cfg-mapping
and
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Field-cfg-convert
I have an application which has is its first page build with different component.I am creating a userStore instance on page load(main.js) I want to access userStore in my header to get the firstname of user and display it on the header section.
Ext.create('store.User', {
storeId : 'storeUser'
});
Ext.define('OnlineApp.view.Main', {
extend : 'Ext.panel.Panel',
xtype : 'app-main',
requires : [
'Ext.plugin.Viewport'
],
controller : 'main',
viewModel : 'main',
layout : 'border',
padding : '0 0 0 0',
bodyStyle : 'border:0',
items : [
{
xtype : 'appHeader',
region : 'north'
},
{
xtype : 'tabpanel',
region : 'center',
bodyPadding : 0,
id : 'contentPanel',
reference : 'contentPanel',
layout : 'card',
border : false,
scrollable : true,
tabBar : {
hidden : true
},
items : [
firstPage,
contentFrame,
],
},
{
xtype : 'footer',
region : 'south'
}
]
});
** This is a Header file where I am trying to use the store below. Not sure what could be the best way to call store without creating a instance.**
Ext.define('OnlineApp.view.Header', {
extend: 'Ext.container.Container',
xtype : 'appHeader',
id : 'main-header',
height : 100,
layout : {
type : 'hbox',
align : 'middle'
},
initComponent: function() {
this.items = [
{
xtype : 'container',
flex : .55,
layout : {
type: 'vbox',
align : 'right'
},
collapsible : false,
padding : 5,
items : [
{
xtype : 'container',
id : 'app-header-user',
ui : 'usp-plain-button',
layout : {
type : 'hbox',
align : 'center'
},
items : [
{
xtype : 'component',
html : 'Welcome, <b>' + Ext.getStore('storeUser').data.firstname + '</b>' **// I am trying to use the store getting fiest name as undefined.**
},
{
xtype : 'gear-menu'
}
]
},
}
];
this.callParent();
}
});
If we assume that you have correctly generated/defined store. You have Ext.define('store.User') somewhere. Otherwise you should use Ext.create('Ext.data.Store',{storeId: 'storeUser'});
So Ext.getStore('storeUser') is returning store object in your header view. You can't just use data.firstname on it. Because data property in the store is Ext.util.Collection.
If you want to get data from your store you should use:
Ext.getStore('storeUser').getAt(0).get('firstname')
Where 0 is the index of the record in your store.
Btw in your case I would recommend you to use Ext.Temaples you can check the official example here. Or here is quite OK example on the stackoverflow.
A listview in Sencha Touch. I have tried almost all the solutions provided in similar questions in stackoverflow. I'm not able to do get the data in store to display for this List.
var alertTypeStore = Ext.create('Ext.data.Store', {
storeId : 'AlertTypeStore',
id : 'AlertTypeStore',
fields : [ 'Description' ],
data : [
{Description : 'test1'},
{Description : 'test2'}
]
});
Ext.define('myapp.view.alerts.Alerts', {
extend : 'Ext.List',
itemTpl : '{Description}',
store : alertTypeStore,
requires : [ 'Ext.TitleBar' ],
xtype : 'alerttypelist',
id : 'alertTypeList',
itemTpl : '<div>{Description}</div>',
config : {
alias : "widget.alerttypelist",
itemId : 'alertTypeList',
cls : 'panelBackground',
items : [ {
xtype : 'titlebar',
title : 'Alert Types',
docked : 'top',
cls : 'headerbar',
items : [ {
xtype : 'button',
text : 'Back',
id : 'subviewBackBtn'
}]
} ]
}
});
Why isn't the two items not getting updated in the list? Please Help. Thank you. I'm a beginner in Sencha Touch.
You must put the store and itemTpl in the config, not the root object.
This will work:
Ext.define('myapp.view.alerts.Alerts', {
extend: 'Ext.List',
config: {
itemTpl : '<div>{Description}</div>',
store : alertTypeStore,
}
});
I have a list and I cant get items in the list to be clickable. I have onItemDisclosure and that should work but it is not. I would like the whole row to be clickable but I cant seem to get anything to work.
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
Here is my full source code
Ext.ns("Course", "Course.stores");
Course = new Ext.Application({
defaultTarget : 'viewport',
name : 'Course',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Course Catalog',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'letter',
type : 'string'
}, {
name : 'course',
type : 'string'
} ]
});
Course.stores.Properties = new Ext.data.Store({
model : 'Properties',
sorters: 'letter',
getGroupString : function(record) {
return record.get('letter')[0];
},
proxy : {
type : 'ajax',
url : '../lib/course_catalog.php',
reader : {
type : 'json',
}
},
autoLoad : true
});
Try something like this:
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
listeners: {
scope : this,
itemtap : function(foo, bar, etc) {
doSomething...
}
} ],
The reason that taps are not being handled is because you are overriding the itemSelector config:
itemSelector : 'span.id',
You should not do this, as Ext.List expects it to be a certain internally-set value in order to handle events on items properly. Simply removing this from your config should make it start working.