Association between models failing in Ext js 6

Association between models failing in Ext js 6 - javascript

I am working on small example to understand association which is working fine in Ext js 5 but failing in Ext js 6 version.
Ext.onReady(function() {
// parent model
Ext.define('Continent', {
extend: 'Ext.data.Model',
field: ['name'],
hasMany: {
model: 'Country',
name: 'countries'
}
});
//child model
Ext.define('Country', {
extend: 'Ext.data.Model',
field: ['name'],
associations: [{
type: 'belongsTo',
model: 'Continent',
associationKey: 'countries',
}]
});
//created store for parent which contains child data
Ext.define('ContinentStore', {
extend: 'Ext.data.Store',
storeId: 'continent',
model: 'Continent',
autoLoad: true,
proxy: {
type: 'memory',
data: [{
name: 'Asia',
countries: [{
name: 'India'
}, {
name: 'Srilanka'
}, {
name: 'Bangladesh'
}]
}, {
name: 'Africa',
countries: [{
name: 'Nigeria'
}, {
name: 'Kenya'
}, {
name: 'South Africa'
}]
}, {
name: 'America',
countries: [{
name: 'West'
}, {
name: 'East'
}, {
name: 'South'
}]
}]
}
});
var continentGrid = Ext.create('Ext.grid.Panel', {
title: 'Continent Grid',
store: Ext.create('ContinentStore'),
width: '50%',
height: '100%',
listeners: {
select: function(cmp, record, index) {
//record.countries() will return new store.
// to append new store I have used reconfigure method.
Ext.getCmp('CountryGrid').reconfigure(record.countries());;
}
},
columns: [{
dataIndex: 'name',
text: 'Continent',
flex: 1
}]
});
var countryGrid = Ext.create('Ext.grid.Panel', {
title: 'Country Grid',
id: 'CountryGrid',
width: '50%',
height: '100%',
columns: [{
dataIndex: 'name',
text: 'Country',
flex: 1
}]
});
Ext.create('Ext.window.Window', {
width: 500,
height: 400,
layout: 'hbox',
autoShow: true,
items: [continentGrid, countryGrid]
})
//console.log(continent);
});
when I try to run the example in Ext js 6 verison getting below error.
Uncaught Error: hasMany ("Continent") and belongsTo ("Country") should not be used in conjunction to declare a relatextionship. Use only one.(…)
working fiddle

Related

extjs grid rowediting remove

In my grid I have activated the editing of the rows in the configuration. But now I want to remove this option, because only certain users should edit the table.
How can I disable or remove the plugin?
Ext.define('mdb.view.Mapping', {
extend: 'Ext.grid.Panel',
xtype: 'array-grid',
requires: [
'Ext.grid.column.Action'
],
plugins: {
gridfilters: true,
rowediting: {
clicksToMoveEditor: 1,
autoCancel: false,
//autoUpdate: false,
saveBtnText : "Speichern",
cancelBtnText: 'Abbrechen',
listeners: {
edit: 'editItem'
}
}
},
What I try is something like this
Ext.getCmp('mappingGrid').editingPlugin.editor.disable

The beforeedit event on the rowediting plugin. Return false to not allow edit return true to allow edit.
Here is a fiddle Fiddle

Try grid.getPlugin('rowediting').enable() or .disable();
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Grid Row Editing',
store: "simpsonsStore",
renderTo: Ext.getBody(),
height: 300,
plugins: {
rowediting: {
clicksToMoveEditor: 1,
autoCancel: false
}
},
dockedItems: [{
xtype: 'toolbar',
items: [{
text: "Disabled Row Editing",
toggledText: "Enable Row Editing",
enableToggle: true,
toggleHandler: function (button, state) {
let rowEditingPlugin = this.up('grid').getPlugin('rowediting');
rowEditingPlugin.cancelEdit();
[
button.text,
button.toggledText
] = [
button.toggledText,
button.text
];
button.updateText(button.text);
if (state) {
rowEditingPlugin.disable();
} else {
rowEditingPlugin.enable();
}
}
}]
}],
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'textfield',
allowBlank: false
}
}]
});
}
});

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});

The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

How can i create a user profile in ext.js?

I'm working on creating a user profile view in my ext.js (and sencha touch) application. I have my routes set up and I have my data model in my data.js. I also created a form to show the data in. However, I'm having issues getting the user data to render on the front end.
index.js code:
// User Profile
var userProfileToolbar = {
xtype: 'toolbar',
id: 'userProfileToolbar',
title: 'UserProfile',
style: settings_sz2,
ui: 'light',
docked: 'top',
items: gen_top_buttons
};
var userprofile_tabbar = {
xtype: 'tabbar',
id: 'userprofile_tabbar',
style: dark_tabbar_sz,
ui: 'light',
docked: 'top',
items: all_discover_buttons
};
var profileForm = {
items: [
{
xtype: 'textfield',
name : 'email',
label: 'Email',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'location',
label: 'Location',
labelWidth: '35%'
},
{
xtype: 'selectfield',
name : 'defaultCollection',
label: 'Default Collection',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},
{
xtype: 'selectfield',
name : 'relationshipStatus',
label: 'Relationship Status',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'Single', value: 'single'},
{text: 'In a Relationship', value: 'inARelationship'},
{text: 'Married', value: 'married'}
]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Gender',
style: settings_sz,
hidden: false,
margin: '0',
id: 'male_female_gender',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'male_female_gender',
label: 'Male',
value: 0,
}, {
name: 'male_female_gender',
label: 'Female',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Sexual Orientation',
style: settings_sz,
hidden: false,
margin: '0',
id: 'sexual_orientation',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'sexual_orientation',
label: 'Straight',
value: 0,
}, {
name: 'sexual_orientation',
label: 'Gay',
value: 1,
},{
name: 'sexual_orientation',
label: 'Bi',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Subscription',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_email_subscription',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_email_subscription',
label: 'Enabled',
value: 0,
}, {
name: 'enable_disable_email_subscription',
label: 'Disabled',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Default Access',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_default_access',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_default_access',
label: 'Public',
value: 0,
}, {
name: 'enable_disable_default_access',
label: 'Private',
value: 1,
}, {
name: 'enable_disable_default_access',
label: 'Adult',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Safe Browsing',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_safe_browsing',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_safe_browsing',
label: 'On',
value: 0,
}, {
name: 'enable_disable_safe_browsing',
label: 'Off',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Visibility',
style: settings_sz,
hidden: false,
margin: '0',
id: 'everyone_loggedin_visibility',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'everyone_loggedin_visibility',
label: 'Everyone',
value: 0,
}, {
name: 'everyone_loggedin_visibility',
label: 'Logged In',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Notification',
style: settings_sz,
hidden: false,
margin: '0',
id: 'new_share_emailnotification',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'new_share_emailnotification',
label: 'New Connection',
value: 0,
}, {
name: 'new_share_emailnotification',
label: 'Video Sharing',
value: 1,
}]
},
{
xtype: 'button',
ui: 'plain',
style: 'background-color: green; width: 90%; color: white; margin-left: 5%; margin-bottom: 15px; margin-top: 15px',
id: 'save',
text: 'Save Changes'
},
{
xtype: 'button',
style: 'width: 90%; margin-left: 5%; margin-bottom: 15px;',
id: 'cancel',
text: 'Cancel',
},
],
listeners: {
itemtap: {
fn: function(view, index, target, record, event) {
var user_id = record.get('user_id');
setTimeout(function() {
Ext.getCmp('userprofile_recommendations_var').deselectAll();
}, 500);
}
}
}
};
Ext.define('myVidster.view.UserProfile', {
extend: 'Ext.Panel',
id: 'UserProfile',
fields: [
'email',
{name: 'disp_name', type: 'string', value: 'account.get("disp_name")'},
],
alias: 'widget.UserProfile',
config: {
scrollable: {
direction: 'vertical',
directionLock: true,
},
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [userProfileToolbar, profileForm,]
},
listeners: {
load: function(users) {
var profileForm = Ext.getCmp('UserProfile');
profileForm.loadRecord(this.data.first());
}
}
});
Data.js:
//User Profile Data
Ext.define('userprofile_model', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'user_id',
type: 'string'
}, {
name: 'disp_name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'phone_number',
type: 'string'
}, {
name: 'pw',
type: 'string'
}, {
name: 'family_filter',
type: 'string'
}, {
name: 'v_orientation_chk',
type: 'string'
}, {
name: 'anc1',
type: 'int'
}, {
name: 'current_video',
type: 'int'
}, {
name: 'current_video_type',
type: 'string'
}, {
name: 'video_history',
type: 'auto'
}, {
name: 'video_history_chk',
type: 'string'
}, {
name: 'HTML5_only',
type: 'string'
}, {
name: 'filter_by',
type: 'string'
}, {
name: 'unlock',
type: 'int'
}],
proxy: {
type: 'localstorage',
id: 'UserProfile'
}
}
});
var userprofile_obj = Ext.create("Ext.data.Store", {
model: 'userprofile_model',
pageSize: 9,
proxy: {
type: 'jsonp',
url: "http://api.example.com/mobile_json2.php",
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
},
extraParams: {
last_id: '0'
},
},
autoLoad: false,
listeners: {
load: function(store) {
var tmp = store.first();
var tmp2 = store.getData();
Ext.getCmp('userprofile_recommendations_var').setItemTpl(discover_recommendations_listTpl)
}
}
});
The issue comes when I try to pre populate the field with data.
For instance:
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
value: account.get('disp_name'),
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
Does not return the display name.

Extjs 4 - form with column layout does not margin fields

Here is my view:
Ext.define('NG.view.order.Header', {
extend: 'Ext.form.Panel',
alias: 'widget.orderheader',
scroll: 'vertical',
layout: 'column',
defaults: {
columnWidth: .33,
border: false
},
config: {
order: null
},
constructor: function (config) {
var me = this;
me.items = me.createItems();
me.callParent(arguments);
me.setOrder(config.order);
},
// creates this view items.
createItems: function () {
var items = [{
//column 1
layout: 'form',
defaultType: 'displayfield',
defaults: {
margin:'0 0 15 0'
},
items: [{
fieldLabel: 'No',
name: 'orderNumber'
}, {
fieldLabel: 'Ver',
name: 'version'
}, {
fieldLabel: 'Date',
name: 'orderDate',
renderer: Ext.util.Format.dateRenderer(Date.patterns.defaultFormat)
}, {
fieldLabel: 'Amount',
name: 'totalAmount'
}]
}, {
//column 2
layout: 'form',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Supplier',
name: 'vendorName'
}, {
fieldLabel: 'Supplier No',
name: 'vendorDuns'
}, {
fieldLabel: 'Customer',
name: 'customerName'
}, {
fieldLabel: 'Buyer',
name: 'orderBuyerName'
}]
}]
return items;
}
});
As you can see I have set a margin on the first column fields.
Its seems this value is ignored .
Is this a known issue ??
Is there a workaround?

how to update form panel record in controller in sencha touch 2 using mvc?

I have a sample login form. In that there is a controller, view and a model.I would like to validate the form. my Form panel id is 'formPanelLogin' and have to update the form record in the controller. but this code "formPanelLogin.updateRecord (teamModel);" can't work and error message like "updateRecord is not define".
Please give me an answer for this problem. my code will following..
//Controller
Ext.define('MyApp.controller.mvcController', {
extend: 'Ext.app.Controller',
config: {
refs: {
BtnSubmit: "#btnSubmit",
BtnCancel:"#btnCancel",
BtnPromoHome:"#PromotionsBtnHome",
BtnThirdBack:"#thirdBtnBack",
BtnSecondBack:"#btnUnderHoodService",
},
control: {
BtnSubmit:
{
tap: "onBtnSubmitTap"
},
BtnCancel:
{
tap: "onBtnCancelTap"
},
BtnPromoHome:
{
tap: "onBtnPromoHomeTap"
},
BtnSecondBack:
{
tap: "onBtnSecondBackTap"
},
BtnThirdBack:
{
tap: "onBtnThirdBackTap"
}
}
},
onBtnCancelTap: function (options)
{
//formPanelLogin.reset();
var teamModel = Ext.create('MyApp.model.MyModel'),
errors, errorMessage = '';
formPanelLogin.updateRecord (teamModel);
errors = teamModel.validate();
if (!errors.isValid()) {
errors.each(function (err) {
errorMessage += err.getMessage() + '<br/>';
}); // each()
Ext.Msg.alert('Form is invalid!', errorMessage);
} else {
Ext.Msg.alert('Form is valid!', '');
} // if
console.log("Cancel");
},
});
//view
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
layout:
{
type: 'card'
},
items: [
{
xtype: 'panel',
id: 'panelOuter',
layout:
{
type: 'card',
animation:
{
type: 'slide'
}
},
items: [
{
xtype: 'panel',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'MVC',
items: [
{
xtype: 'button',
docked: 'left',
id: 'btnBack'
},
{
xtype: 'button',
docked: 'right',
id: 'btnHome'
}
]
},
{
xtype: 'formpanel',
docked: 'top',
height: 117,
id: 'formPanelLogin',
scrollable: true,
items: [
{
xtype: 'fieldset',
id: 'loginform',
items: [
{
xtype: 'textfield',
label: 'UserName',
name: 'userName',
labelWidth: '40%',
name: 'usernameField',
placeHolder: '...... Type here .......',
required: true
},
{
xtype: 'passwordfield',
label: 'Password',
labelWidth: '40%',
required: true
}
]
}
]
},
{
xtype: 'panel',
height: 45,
id: 'btnPanel',
items: [
{
xtype: 'button',
docked: 'right',
id: 'btnSubmit',
ui: 'action-small',
width: 85,
text: 'Submit'
},
{
xtype: 'button',
docked: 'right',
id: 'btnCancel',
ui: 'decline-small',
width: 85,
text: 'Cancel'
}
]
}
]}
]
},
});
//model
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields : [
{
name: 'userName',
type: 'string'
},
{
name: 'password',
type: 'string'
}
],
validations: [
{
field: 'userName',
type: 'presence',
message: 'User Name is required.'
}
]
}
});

We Keep Coding

JavaScript is the programming language of the Web.

Association between models failing in Ext js 6 - javascript

Related

extjs grid rowediting remove

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

How can i create a user profile in ext.js?

Extjs 4 - form with column layout does not margin fields

how to update form panel record in controller in sencha touch 2 using mvc?

Categories

Resources