Intro:
I need to call the backend controller to see if the user is admin. If the user is NOT admin, hide the toolbar in the application. Currently the var is successfully changing; However, it is changing after the view is already created causing the view to always have the toolbar visable.
Problem:
Need to check backend to see if user is in the admin group.
Need to return true if they are in admin group
MyCode:
var adminBool = false;
function CheckAdmin() {
debugger;
var a;
Direct.Report.IsAdmin(this.results, a);
debugger;
};
function results(result, constructor, c, d, e, f, g, h) {
debugger;
this.adminBool= result.adminUser; //returns bool
}
Ext.define('Ext.View.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
init: this.CheckAdmin(),
data: {
addNew: true,
update: true,
gridData: null,
isAdmin: this.adminBool
}
});
Synopsis:
Call the backend controller for admin status
Return bool
Update viewModel with bool respectively
ViewModel property,'isAdmin', will bind with hidden property to hide unwanted actions for non admins
UPDATE:
Basically I need a way to delay "isAdmin: this.adminBool" check to after the backend call is finished.
As you are using ViewModel.
So you can use set() method to update your viewmodel field.
I have created an sencha fiddle demo using viewmodel. You can check, how it is working in fiddle. In this fiddle I have not used any API, it just example regarding of ViewModel. Hope this will help you to solve your problem or achieve your requirement.
//ViewModel
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
data: {
isAdmin: true
}
});
//Panel
Ext.create('Ext.panel.Panel', {
title: 'ViewModel example',
width: '100%',
renderTo: Ext.getBody(),
viewModel: 'AdministrationViewModel',
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 10
},
defaults: {
margin: 10
},
items: [{
xtype: 'combo',
height: 40,
fieldLabel: 'Choose Admin or user',
emptyText: 'Choose Admin or user',
labelAlign: 'top',
store: {
fields: ['name', 'value'],
data: [{
"value": true,
"name": "Admin"
}, {
"value": false,
"name": "User"
}]
},
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners: {
select: function (combo, record) {
var viewModel = combo.up('panel').getViewModel(),
isAdmin = record.get('value');
//If selected value is {Admin} then we will show toolbar otherwise in case of {User} hide
viewModel.set('isAdmin', !isAdmin);
}
}
}, {
xtype: 'toolbar',
width: '100%',
height: 50,
padding: 10,
bind: {
hidden: '{isAdmin}'
},
items: [{
// xtype: 'button', // default for Toolbars
text: 'Admin',
}, {
xtype: 'splitbutton',
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{
xtype: 'tbspacer'
}, // same as ' ' to create Ext.toolbar.Spacer
'text 2', {
xtype: 'tbspacer',
width: 50
}, // add a 50px space
'text 3'
]
}]
});
Related
I am new to ext js (working on ext js 6.2) and trying to get values from combo box to get 3d bar chart from selected value, but neither I am getting selected value nor the chart with selected value. Please help me getting out of this problem.
my codes are as under :
2FAData.js:
Ext.define('LICApp.store.2FAData', {
extend: 'Ext.data.Store',
alias: 'store.2fa-data',
requires: [
'Ext.data.reader.Xml'
],
autoLoad: true,
fields: ['name', 'cnt', 'zone'],
groupField: 'zone',
proxy: {
type: 'ajax',
cors: 'true',
url: 'http://localhost:8080/UserManagement/rest/BiodataController/bio',
method: 'POST',
reader: {
type: 'xml',
record: 'biodata',
rootProperty: 'biodatas'
}
},
});
Basic.js
Ext.define('LICApp.view.charts.bar3d.Basic', {
extend: 'Ext.Panel',
xtype: 'bar-basic-3d',
controller: 'bar-basic-3d',
requires: [
'Ext.chart.theme.Muted',
'LICApp.store.2FAData',
'Ext.grid.feature.Grouping'
],
width: 1300,
items: [{
xtype: 'combobox',
hideLabel: true,
store: {
type: '2fa-data'
},
valueField: 'zone',
displayField: 'zone',
typeAhead: true,
queryMode: 'local',
triggerAction: 'query',
emptyText: 'Select a Zone...',
selectOnFocus: true,
width: 200,
indent: true
},
{
xtype: 'cartesian',
flipXY: true,
reference: 'chart',
width: '100%',
height: 500,
insetPadding: '40 40 30 40',
innerPadding: '3 0 0 0',
theme: {
type: 'muted'
},
store: {
type: '2fa-data',
},
animation: {
easing: 'easeOut',
duration: 500
},
interactions: ['itemhighlight'],
axes: [{
type: 'numeric3d',
//position: 'bottom',
//fields: 'name',
//maximum: 150000,
//majorTickSteps: 10,
renderer: 'onAxisLabelRender',
//title: 'Number of Employees',
grid: {
odd: {
fillStyle: 'rgba(245, 245, 245, 1.0)'
},
even: {
fillStyle: 'rgba(255, 255, 255, 1.0)'
}
}
}, {
type: 'category3d',
position: 'left',
fields: 'name',
label: {
textAlign: 'right'
},
grid: true
}],
series: [{
type: 'bar3d',
xField: 'name',
yField: 'cnt',
style: {
minGapWidth: 10
},
highlight: true,
label: {
field: 'cnt',
display: 'insideEnd',
renderer: 'onSeriesLabelRender'
},
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
}],
sprites: [{
type: 'text',
text: 'Implementation of 2FA Biometric - Progress Chart',
fontSize: 22,
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position
}, {
type: 'text',
text: 'Source: 2FA Data Server',
fontSize: 10,
x: 12,
y: 490
}]
}],
tbar: [
'->',
{
text: 'Preview',
handler: 'onPreview'
}
],
listeners: {
select: 'onItemSelected'
}
});
BasicController.js
Ext.define('LICApp.view.charts.bar3d.BasicController', {
extend: 'Ext.app.ViewController',
alias: 'controller.bar-basic-3d',
onAxisLabelRender: function (axis, label, layoutContext) {
return Ext.util.Format.number(layoutContext.renderer(label) );
},
onSeriesLabelRender: function (v) {
return Ext.util.Format.number(v);
},
onSeriesTooltipRender: function (tooltip, record, item) {
var formatString = '0,000 ';
tooltip.setHtml(record.get('zone') + ': ' +
Ext.util.Format.number(record.get('cnt'), formatString));
},
onPreview: function () {
if (Ext.isIE8) {
Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
return;
}
var chart = this.lookupReference('chart');
chart.preview();
},
onItemSelected: function (sender, record) {
var zone = combo.getValue();
},
});
You should attach a select listener to your combobox:
{
xtype: 'combobox',
hideLabel: true,
store: {
type: '2fa-data'
},
valueField: 'zone',
displayField: 'zone',
typeAhead: true,
queryMode: 'local',
triggerAction: 'query',
emptyText: 'Select a Zone...',
selectOnFocus: true,
width: 200,
indent: true,
listeners: {
select: 'onItemSelected' //this one
}
}
Notice in your onItemSelected method in your ViewController:
onItemSelected: function (sender, record) { //<- param is sender
//var zone = combo.getValue(); //you are using combo, this is undefined
var zone = sender.getValue();
// or better yet, why not use the `record` parameter?
var theValue = record[0].data.zone;
},
The binding feature of Sencha Ext JS MVVM architecture helps to write declarative code and avoid writing handlers in controllers. Since it's a migration to 6.2, this approach can be taken to remove unnecessary handlers in the controller. Here's a small example on this.
Update:
With reference to the provided example, please read the following points:
The parent class Panel has a View Model, which is available down the hierarchy to combo box and chart components.
View Model has a data property rec, which holds reference to the selected record from combo box. The selection property of combo box is bound to this rec property. It means that the moment a new record is selected from combo box, the rec property of View Model gets updated.
The View Model also has two stores - comboStore and chartStore
a. comboStore: - contains complete data set. It is bound to the combobox.
b. chartStore:- is the child store of comboStore (a child store takes its data from the parent store but has additional capability of filtering and sorting, independent of the parent store.). It is bound to the chart component and filters on the rec.name property (i.e the moment rec is updated, filtering is triggered.) So, technically, this store always contains only the selected record from combo box. And since chart is bound to this store, it gets updated too and shows the selected record's 3dbar graph.
Here's the inline code. Please see the comments for more.
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
layout: 'vbox',
//Declare parent class view model
//This view model will be available down the hierarchy
viewModel: {
//Declare viewmodel's static data properties
data: {
//This references the selected record from combo box
rec: null,
},
//Declare stores for this viewmodel
stores: {
//Declare store for combo box containing complete dataset
comboStore: {
fields: ['name', 'apples', 'oranges'],
data: [{
name: 'Eric',
apples: 10,
oranges: 13
}, {
name: 'Mary',
apples: 7,
oranges: 20
}, {
name: 'John',
apples: 5,
oranges: 12
}, {
name: 'Bob',
apples: 2,
oranges: 30
}, {
name: 'Joe',
apples: 19,
oranges: 17
}, {
name: 'Macy',
apples: 13,
oranges: 4
}]
},
//Declare store for chart component
chartStore: {
//This is child store of 'ComboStore'. Its data source is 'comboStore'
source: '{comboStore}',
//This filters this child store to contain only the selected record from combo box
filters: [{
//This filters the store by 'name' property, which is the 'displayField' of combo box
property: 'name',
//This binding helps to filter by the selected record's 'name' property
//'rec' is the selecte record which is available in the view model
value: '{rec.name}'
}],
}
}
},
items: [{
xtype: 'mycombo',
bind: {
//This binding provides 'comboStore' data to the combobox
store: '{comboStore}',
//The selection property of combo box is published to the viewmodel
//and its reference is stored in the viewmodel data property 'rec'
selection: '{rec}'
}
}, {
xtype: 'mychart',
bind: {
//This binding provides 'chartStore' data to the chart component
//Since it is bound, the moment this store is updated/filtered, the chart view gets updated too
store: '{chartStore}'
}
}]
});
Please change listeners for select event instead of panel to combobox. Panel don't have select event.
I have created an Sencha Fiddle demo for combobox select/change both event. it will show how it is working. Hope this will help you to solve you problem or achieve your functionality.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
margin: 10,
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listeners: {
select: function (combo, record) {
Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + record.get("name") + '</b>');
}
/*change: function (combo, newValue,oldValue) {
Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + newValue + '</b>');
}*/
}
});
I have a form as follows
this.stdForm = new Ext.form.Panel(this.createStdForm());
this.stdForm.getForm().load({
params: { action: 'load', id: 1234, dep: 'std' },
success: this.formLoaded,
scope: this
});
createStdForm: function () {
var flds = {
items: [
{ fieldLabel: 'Roll Number', name: 'ROLL_NUMBER', xtype: 'displayfield' } }
]
};
var fldSet = {
title: 'Student Information',
xtype: 'panel',
defaultType: 'fieldset',
defaults: { autoHeight: true, baseCls: 'x-fieldset-noborder', reference:'RollNumber'},
items: [flds]
};
return {
layout: 'column',
border: false,
defaults: {
border: false
},
url: this.getUrl(),
items: [
col1
]
};
}
and on formloaded function, I am trying to get reference of roll number field
formLoaded:function (form, action) {
form.getreferences('RollNumber') // not working
form.lookupreference(); // not working
}
Can anybody tell me what I am doing wrong.
In your example - just add referenceHolder: true to the panel:
If true, this container will be marked as being a point in the
hierarchy where references to items with a specified reference config
will be held. The container will automatically become a
referenceHolder if a controller is specified. See the introductory
docs for Ext.container.Container for more information about references
& reference holders.
Working example: https://fiddle.sencha.com/#fiddle/1d7t
I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.
this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});
So I have the view below. This view is called when an item from a list on a previous view is tapped. The lists on this view are filtered based on the previous selection, but I want to be able to add items to these lists that contain the same filter (store field = "value"). How can I get it so that the value that is filtering the lists is also passed when clicking the button and loading a new view?
My View page.
Ext.define("MyApp.view.ShowAll", {
extend: 'Ext.Container',
requires: ['Ext.NavigationView', 'Ext.dataview.List', 'Ext.layout.HBox', 'Ext.Container'],
xtype: 'myapp-showall',
config: {
layout: 'hbox',
items: [
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
flex: 1,
items: [
{
xtype: 'list',
store: 'leftStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValue', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
},
{
style: "background-color: #333;",
width: 10
},
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainerTwo',
flex: 1,
items: [
{
xtype: 'list',
store: 'rightStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValueRight', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
}
]
}
});
Here is part of my Controller (which sets the store filters)
showValues: function() {
this.showValueDetails(arguments[3]);
},
showValueDetails: function(record) {
var title = "Value: "+record['data']['name'];
var showValue = Ext.create('MyApp.view.ShowAll', { title: title });
showValue.setRecord(record);
var valueName = record['data']['name'];
var leftStore = Ext.getStore("leftStore");
leftStore.clearFilter();
leftStore.filter('storeField', valueName);
var rightStore = Ext.getStore("rightStore");
rightStore.clearFilter();
rightStore.filter('storeField', valueName);
this.getMain().push(showValue);
},
It sets the page title correctly and filters the store also. I just am unsure how to pass a variable so when the buttons are clicked the valueName (from controller) is passed to the next view.
Since I was able to set the title fine using the code above, once I click the submit button all it takes is the following to get the title.
var titleVariable = Ext.getCmp('ShowAll')['title'];
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.