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'];
Related
I'm trying to create a panel like:
with the below code as a beginning, however I'm not sure how can I create a list/table inside a panel in a way like it looks below in the image.
I also have to load the data dynamically inside the panel.
also I'm using panel since I want it to be a collapsible one
$cls.superclass.constructor.call(this, Ext.apply({
items: [
this.section({
items: [
this.panel = new Ext.Panel({
items: [
this.section({
items: []
})
],
collapsible: true,
})
]
})
]
}, cfg));
Ext.extend($cls, Panel, {
getData: function(data) {
//here I have the entire data I want to show in the list. just not sure how?
}
});
any ideas?
You can create custom rows with Ext.Panel. The example shows only show creating list. To add part where AND, OR you can change structure of data and create row with nested panel row.
Here is example of creating custom list with panel:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'ExtJS Master Panel',
items: [
collapsibleList = new Ext.Panel({
title: 'Collapsible List',
collapsible: true,
hideBorders: true,
padding: '10px',
height: 400
})
],
getData: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([{
name: 'Last VM Scan',
decider: 'LESS THAN',
period: '30 days'
}, {
name: 'Last CERTVIEW Scan',
decider: 'LESS THAN',
period: '14 day'
}, {
name: 'Last checked In',
decider: 'LESS THAN',
period: '10 days'
}]);
}, 1000);
});
},
listeners: {
afterrender: function () {
console.log(collapsibleList);
Promise.resolve(this.getData()).then(function (data) {
for (var i = 0; i < data.length; i++) {
var pan = new Ext.Panel({
xtype: 'panel',
layout: 'hbox',
hideBorders: true,
items: [{
xtype: 'panel',
padding: '10px',
width: 200,
items: [{
xtype: 'label',
text: data[i].name
}]
}, {
xtype: 'panel',
padding: '10px',
width: 300,
items: [{
xtype: 'label',
text: data[i].decider
}]
}, {
xtype: 'panel',
padding: '10px',
items: [{
xtype: 'label',
text: data[i].period
}]
}]
});
collapsibleList.add(pan);
}
collapsibleList.doLayout();
});
}
}
});
});
Working Fiddle Link: https://fiddle.sencha.com/#view/editor&fiddle/2l14
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 try to use jquery together with extjs. I want when I click on an image to get the id of the image and store it in a variable. I use jquery for this part. The image lives in an extjs panel. I use with no result and afterrender listener Here is my code:
items: [{
xtype: 'tabpanel',
width: 600,
activeTab: 0,
flex: 2,
layout: {type: 'fit'},
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScroll:true,height:500 }],
listeners: {afterrender: function(c){c.el.on('click', function()
{
$('img').on( 'click',function() { // event delegation
var idImg = $(this).attr('id');
alert(idImg);
addMarker(idImg)
var alt = $(this).attr('alt'); // get the value of alt
$('#curInterId').val(alt); // place the internal id in the text box
});
});}},
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScroll:true,height:500 }]
}]
}],renderTo : Ext.getBody()
},
Try something like this:
Fiddle Link
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create("Ext.panel.Panel", {
layout: "fit",
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'Images',
items: [{
xtype: 'image',
height: 200,
width: 600,
src: 'http://www.newbridgegreen.com/assets/bootstrap/img/sencha_logo.png',
listeners: {
el: {
click: function() {
Ext.Msg.alert("Message");
}
}
}
}]
}]
});
}
});
The key here is the el: within listeners, you can add standard DOM click handlers to any element using this method.
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.
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'
}
});
}
});