hello,
to manage user access,i need to disable loading some items, in a viewport for now i hide them with a the "hidden" property, but I can't prevent the background processing for this items, such as the server request
how can i disable loading for a specific items.
this my viewport code
var notAllowAdmin=true; //init access rule gere for admin panel
Ext.define('eFinances.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border'
],
layout: 'border',
items: [
{
xtype: 'eFinancesToolbar',
region: 'north'
},
{
title: 'Navigation',
region: 'west',
collapsible: true,
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
xtype:'menuTresorerie',
title: 'Trésoreries',
iconCls: 'balance' // see the HEAD section for style used
},{
xtype:'menuAchat',
title: 'Achat et fournisseurs',
iconCls: 'depense' // see the HEAD section for style used
}, {
xtype:'menuVente',
title: 'Ventes et clients',
iconCls: 'recette'
}, {
xtype:'menuAdmin',
hidden :notAllowAdmin, // hide items if not allowed
title: 'Administration',
iconCls: 'administration'
}]
},
{
region: 'center',
title: 'work area'
}
]
});
for the moment i hide admin panel with notAllowAdmin variable initialized with rules access , but whole background process are executed, some can tell me how to proceed to completly disactivate panel loading or give me best idea to do this (managing users access)
regards
You can stop adding hidden components to the items array. Example:
items: [
{
xtype:'menuTresorerie',
title: 'Trésoreries',
iconCls: 'balance' // see the HEAD section for style used
},
{
xtype:'menuAchat',
title: 'Achat et fournisseurs',
iconCls: 'depense' // see the HEAD section for style used
},
{
xtype:'menuVente',
title: 'Ventes et clients',
iconCls: 'recette'
}
].concat(notAllowAdmin ? [] : [
{
xtype:'menuAdmin',
title: 'Administration',
iconCls: 'administration'
}
]);
But you should notice that this should be trated only as optimization, and true access control should be implemented on server side.
Related
I have created one iFrame window and in that there is separate ext app.
Win = new Ext.IframeWindow({
id: 'MyWinID',
modal: true,
resizable: true,
title: 'H1',
closable: true,
constrain : true,
});
Win.width = (winWidth / 100) * 90,
Win.height = (winHeight / 100) * 90,
Win.show().center();
On the resize I wanted to access the app which is placed in iFrame.
listeners :{
resize : function(a,b,c){
// How to access element of main at this point. I am trying this
var WinFrame = window.frames['MyWinID']
}
}
My main of iFrame app is
Ext.define('My.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.tab.Panel',
],
controller: 'main',
viewModel: 'main',
layout: 'border',
items: [{
xtype: 'toolbar',
frame: true,
region: 'south',
items: [ some item]
},
{
title: 'App',
itemId: 'selectionPanel',
region: 'west',
xtype: 'panel',
scroll: 'y',
frame: true,
items: []
},
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
scroll: 'y',
itemId: 'abc',
reference: 'abc',
layout: {
//type: 'anchor',
type: 'vbox',
align: 'stretch'
},
items: []
}]
});
Can you please suggest how to achieve this.
Javascript basic rule:
"global" variables (e.g. Ext) are available in the tree under window and vice versa, so window.Ext.getCmp("MyWinID") and Ext.getCmp("MyWinID") are the same.
Javascript rule for frames:
window.frames[id] contains the selected frame's window element.
Both together yield the answer your question, which can be summarized in this simple example:
window.frames['MyAppFrame'].Ext.getCmp("MyTestContainer").add({
xtype:'button',
handler:function(btn) {
btn.up('form').submit();
}
});
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'
}
});
}
});
Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/
I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)
may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.
I have a bunch of tbar items displayed in new lines. It works fine.
But the only issue I am having is that displays a horizontal border between each tbars.
How can I remove that?
items: [
{
xtype: 'panel',
id: 'navi',
region: 'west',
collapsible: false,
title: 'Navigation',
bodyStyle: 'background-color: #BFCBD5',
width: 155,
animCollapse: true,
minHeight: 600,
items: [
{
border:0,
tbar: [
{
xtype: 'button',
text: 'Home',
textAlign:'left',
width: 140,
align:'left',
//bodyStyle: 'background-color:#BFCBD5;',
handler: function() {
document.location.href = BasePath;
}
}
]
},
{
border:0,
tbar: [
{
xtype: 'button',
text: 'Dashboard',
textAlign:'left',
width: 140,
handler: function() {
document.location.href="http://www.dtvdashboard.com";
}
}
]
},
{
xtype: 'text',
padding: '64 0 0 0',
text: "Logged in as:",
textAlign:'left',
style : "color:#3E546B;font-style:italic;font-size: 11px;",
width: 140,
handler: function() {
document.location.href="";
}
},
]
}
]
EDIT: I added bodyBorder:false, that kinda removed the border line. But i still see lighter shade of the border
There is plenty of possibilities to remove that border.
you can remove tbar and stick to the buttons only (example: http://jsfiddle.net/kKjuC/1/)
you can render links as plain html and attach click handler to each one or to the container or just simply add href to links (example: http://jsfiddle.net/YeyET/1/)
you can use DataView
I have this grid and form panels. I want to add a grid of data into the form panel and still have buttons from the form panel.
myGrid= Ext.create('Ext.grid.Panel',{
layout: {
type: 'fit'
},
id: 'gridId',
title: null,
store: myDataStore,
columns: [{
header: 'header 1',
dataIndex: 'index_1',
width: 120
}, {
header: 'header 2',
dataIndex: 'index_2',
width: 120
}, {
header: 'header 3',
dataIndex: 'index_3',
width: 120
}],
stripeRows: true
})
formPanel= Ext.create('Ext.form.Panel',{
id:'panelId',
items:[myGrid],
buttons: [{
// cancel, save, other buttons
}]
})
But I get this error
HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy
what do I do wrong?
You forgot semicolons after your Ext.create() config.
Seems to work just fine here. I made a fiddle
http://jsfiddle.net/WGgR8/1/