This question is part of How to set defaults for Grid columns within initComponent and posted here independently through #scebotari66 advice on main post.
As you'll notice below; there is Ext.Array.map to define defaults for related function.
// Statment
initComponent: function () {
var me = this;
me.items = Ext.Array.merge(
me.getFormSt(),
Ext.Array.map(me.getForm(), function (listFldConfig) { //Aim to using the array map function to set flex property for subset fields
listFldConfig.flex = 1;
return listFldConfig;
}),
me.getFormEnd()
);
me.callParent(arguments)
},
// Implementation
getForm: function () {
var me = this;
var form = [
{ // Array.map func. sets `flex` to this obj.
xtype: 'fieldcontainer',
layout: { type: 'vbox', align: 'stretch', pack: 'start' },
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [
{
xtype: 'foofield',
//flex: 1 //But I need to set `flex` as default for this obj. in nested items array
},
{
xtype: 'barfield',
//flex: 1 //But I need to set `flex` as default for this obj. in nested items array
}
The thing is this implementation is works as expected but on this situation I'm creating a fieldcontainer object which is include all other things and items inside. And Array.map sets flex config only to first fieldcontainer obj. I need to define flex config only for nested items which has foofield and barfield.
Defaults are defined using the defaults config on containers:
xtype: 'fieldcontainer',
layout: 'hbox',
defaults: {
flex: 1
},
items: [
{
xtype: 'foofield',
},
{
xtype: 'barfield',
}
To cover nested containers, you can nest multiple defaults configs inside each other:
defaults: {
defaults: {
flex: 1
},
flex: 1
}
Please note that an xtype config as part of the defaults object can lead to undesired results, and that you should use the defaultType config to define the default type of child elements of a container.
Through #NarendraJadhav 's opinion; created my own structure...
Definition;
Ext.define('MyApp.BaseFldCon', {
extend: 'Ext.form.FieldContainer',
xtype: 'basefldcon'
});
Ext.define('MyApp.VBoxFldCon', {
extend: 'MyApp.BaseFldCon',
xtype: 'vboxfldcon',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
}
});
Ext.define('MyApp.HBoxFldCon', {
extend: 'MyApp.BaseFldCon',
xtype: 'hboxfldcon',
layout: {
type: 'hbox'
},
defaults: {
flex: 1
}
});
Implementation;
{
xtype: 'vboxfldcon',
items: [
{
xtype: 'hboxfldcon',
items: [
{
xtype: 'foofield',
},
{
xtype: 'barfield'
},
{
xtype: 'foocombo'
}
]
},
Related
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'
]
}]
});
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
Here is the relevant code from the view file:
Ext.define('MARS.view.listings.SummarySetupView', {
extend: 'Ext.Container',
xtype: 'summarysetupview',
requires: [
'MARS.view.listings.SummarySetupController'
],
controller: 'summarysetup',
title: "Summary",
items: [
{
xtype: 'deliverablesGridPanel'
},
{
xtype: 'button',
text: 'Submit',
handler: 'onSubmit'
}
]
});
Here is the relevant code from the controller file:
Ext.define('MARS.view.listings.SummarySetupController', {
extend: 'Ext.app.ViewController',
alias: 'controller.summarysetup',
onSubmit: function () {
console.log(this.getView().refs.gridDeliverables.getChecked());
// Returns [] - empty array
}
});
And here is the definition of my xtype "deliverablesGridPanel":
Ext.define('MARS.view.DeliverablesGridPanel', {
extend: 'Ext.tree.TreePanel',
xtype: 'deliverablesGridPanel',
title: 'Deliverables',
reference: 'gridDeliverables',
flex: 1,
autoScroll: true,
rootVisible: false,
bind: {
store: '{jobTreeStore}'
},
columns: [
{
xtype: 'treecolumn',
dataIndex: 'Name',
text: 'Name',
width: 200
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description',
flex: 1
}
]
});
It clearly knows that it is a grid because the function works, it just always returns empty...
Checkbox selection columns in grids are usually part of a selection model. I know from old extjs3 days you would do something like grid.getSelectionModel().getSelections() and that would achieve what you are trying to do here.
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 having trouble understanding how I need to define and use the MVC model for my test EXTjs4 app. Consider the following structure.
app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Cards', 'Fourscrum'],
launch: function () {
Ext.create('Ext.container.Viewport', {
defaults: { flex: 1 },
layout: {
type: 'hbox',
align: 'stretch',
},
items:
[
Ext.widget('Fourscrum')
]
});
Controller:
Cards.js
Ext.define('AM.controller.Cards', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['card.List', 'priority.prioritycombo', 'card.Edit'],
Fourscrum.js
Ext.define('AM.controller.Fourscrum', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['scrum.Fourscrum', 'card.List'],
view.scrum.Fourscrum.js
Ext.define('AM.view.scrum.Fourscrum', { // *** Variable
extend: 'Ext.panel.Panel',
alias: 'widget.Fourscrum', // *** Variable
width: 400,
height: 300,
layout: 'column',
title: 'Scrum', // *** Variable
items:
[
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.inprogresscardlist',
title: "In Progress",
store: "InprogressCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.reviewcardlist',
title: "Review",
store: "ReviewCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.donecardlist',
title: "Done",
store: "DoneCards"
})
]
});
My ideal structure for this app is as follows:
Viewport defined (inside app.js)
which contains a Fourscrum.js view (which is just a panel)
which contains 4 different List.js views (which are just grids).
Trying to accomplish this, I currently get a few errors when i start messing with the above code:
Item undefined
namespace undefined
Does anyone know why this doesn't work?
PS. I can get this example to work if I replace my 'cardlist' widgets with panels directly defined in the Fourscrum view.
PPS. This also works properly if I forego the Fourscrum container panel all together :(
EDIT:
I felt my explanation was a little unclear so I've uploaded an image to help describe the program. I'm not sure where I need to define the stores, models, and views with this nested structure. So I've repeated it in both controllers. I hope that's not what is causing the problem.
EDIT2:
Ext.define('AM.view.card.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.cardlist',
//title: 'List',
//store: 'Cards',
//multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'ddzone',
dropGroup: 'ddzone'
}
},
// selType: 'cellmodel',
// plugins: [
// Ext.create('Ext.grid.plugin.CellEditing', {
// clicksToEdit: 1
// })
// ],
columns: [
{
header: 'ID',
dataIndex: 'external_id',
field: 'textfield',
width: 30
},
{
header: 'Name',
dataIndex: 'name',
field: 'textfield',
width: 150
},
{
header: 'Priority',
dataIndex: 'priority_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Priorities").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60,
field: { xtype: 'PriorityCombo' }
},
{
header: 'Size',
dataIndex: 'size_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Sizes").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60
},
{
xtype: 'actioncolumn',
width: 16,
items: [{
icon: 'Styles/Images/zoom.png', // Use a URL in the icon config
tooltip: 'Zoom In',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
}
]
});
I think I see a big problem in your code (if you pasted all of it).
In your view definitions if you are extending Ext components you MUST have the following function that ends in the callParent method like below.
initComponent: function() {
this.items = this.buildMyItems();
this.callParent(arguments);
},
buildMyItems: function(){
//my code
}
Robodude,
According to the Class guide on Sencha.com all widgets must be contained in properly named class files. I don't think you can simultaneously define and create your widgets in the panel definition.
Split out your definitions from the panel config. Also dont forget to enable the auto loader:
Ext.Loader.setConfig({
enabled : true
});