I have a problem when I bind the data store from the data model in the model I get responses that I have sent when I want to set the data in the grid error Cannot use bind config without a viewModel
in the items section I have also added itemconfig: {
viewModel: true
} but it still doesn't work and
and in view already require controller and model
items: [{
xtype: "formpanel",
autoScroll: true,
items: [{
itemConfig: {
viewModel: true
},
hideHeaders: true,
xtype: 'grid',
height: "200px",
bind:{
store:"{approval_capital_appropriation_request}"
},
columns: [{
dataIndex: "field",
text: "field",
width: "130px"
}, {
dataIndex: "value",
text: "value",
width: "300px"
}]
}]
}]
Please assign viewModel class like
viewModel: 'main'
*************************************
Ext.define('SenchaApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
requires: [
'SenchaApp.store.Personnel',
'SenchaApp.view.FilterCombo'
],
plugins: 'gridfilters',
title: 'Personnel',
viewModel: 'main',
bind:{
store:'{personnel}'
},
columns: [
{ text: 'Name', dataIndex: 'name',
filter:{
type:'filterCombo'
}
},
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
listeners: {
select: 'onItemSelected'
}
});
Here is model
**********************
Ext.define('SenchaApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
stores:{
personnel:{
//TODO -*********
}
}
});
Related
I have a widget with combobox & flow I need is something like this,
At first combo is disabled.
Each row has edit icon & when I click on edit only that particular combo should be enabled.
Then when I save the record the enabled combo should be disabled again.
Step 3 is not working for me.
{
text: 'TC',
dataIndex: 'scrTC',
xtype: 'widgetcolumn',
widget: {
xtype: 'combo',
store: 'TCStore',
valueField: 'value',
displayField: 'displayValue',
matchFieldWidth: false,
bind: {
readOnly: {
isReadOnly
}
}
}
}
I have also tried onwidgetattach method, but after save this method is not called so its not working.
onWidgetAttach: function(column, widget, record) {
if (condition) {
widget.setReadOnly(false);
} else {
widget.setReadOnly(true);
}
}
Anyone has an idea?
Edit 2:
I have inserted readOnly:true to my leaf records dynamically.
In View Model create a isReadOnly function,
Ext.define('MainViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
isReadOnly: function (record) {
return record.get('readOnly');
}
}
});
And in treeGrid its,
{
text: 'TC',
dataIndex: 'scrTC',
xtype: 'widgetcolumn',
widget: {
xtype: 'combo',
store: 'TCStore',
valueField: 'value',
displayField: 'displayValue',
matchFieldWidth: false,
bind: {
readOnly: '{isReadOnly}'
}
}
}
On first load combobox is readOnly as expected, but when i click on edit button in row it creates a new row below & i have set readOnly=false. But still the combobox is not binding as readOnly false n making it editable.
You need to use record.readOnly for widgetcolumn to bind config for combobox. Like this
bind: {
readOnly: '{record.readOnly}'
}
You can check here with working fiddle.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'grid',
title: 'Binding Example',
width: '100%',
viewModel: {
stores: {
gridStore: {
type: 'store',
fields: ['name', 'abrr', {
//This readOnly for widgetcolumn of combobox
name: 'readOnly',
//By default vlaue is true
defaultValue: true,
type: 'boolean'
}],
data: [{
name: 'Substation A',
"abbr": "AL",
readOnly: true
}, {
name: 'Substation B',
"abbr": "AK"
}, {
name: 'Substation C',
"abbr": "AZ",
}, {
name: 'Substation D',
"abbr": "AK"
}]
},
states: {
type: 'store',
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
}
}
},
bind: '{gridStore}',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name',
width: 120
}, {
text: 'Select',
flex: 1,
xtype: 'widgetcolumn',
dataIndex: 'abbr',
widget: {
xtype: 'combo',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
bind: {
store: '{states}',
readOnly: '{record.readOnly}'
}
}
}, {
text: 'Edit',
width: 50,
xtype: 'widgetcolumn',
widget: {
xtype: 'button',
iconCls: 'x-fa fa-edit',
handler: function (btn) {
//Set the read only fase on button click
btn.getWidgetRecord().set('readOnly', false);
}
}
}],
renderTo: Ext.getBody()
});
}
});
I want to have a dynamic tree panel in my project. I use from sencha docs example For this component.
But, I have a error when run my project:
Ext.data.schema.Schema.lookupEntity(): No such Entity "Category".
MyProject/Model/Category.js:
Ext.define('MyProject.model.Category',{
extend: 'Ext.data.Model',
fields: ['id', {
name: 'name',
type: 'string'
}]
});
MyProject/classic/src/view/category/Cateogry.js:
Ext.define('MyProject.view.category.Category', function(){
var store = Ext.create('Ext.data.TreeStore', {
model: 'Category',
root: {
name: 'Product'
}
});
var items = [{
items:[{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'treepanel',
reference: 'treepanel',
height: 200,
width: 400,
frame: true,
store: store,
rootVisible: false
},{
xtype: 'button',
text: 'Add',
listeners: {
click: 'onClick'
}
}]
}];
return{
extend: 'Ext.panel.Panel',
requires: [
'Ext.form.Panel',
'Ext.rtl.*'
],
controller: 'categorycontroller',
alias: 'widget.category',
layout: 'vbox',
items: items
};
});
You have to add your model as required:
...
requires: [
'Ext.form.Panel',
'Ext.rtl.*',
'ProjectName.model.Category'
],
...
I'd been searching for so long and I cannot find a concrete answer. Let's say I have an extended control from panel like this:
Ext.define('MyApp.view.admin.User',{
extend: 'Ext.panel.Panel',
config: {
canAdd: false,
canDelete: false,
canEdit: false
},
constructor: function(config){
this.initConfig(config);
this.callParent(arguments);
},
xtype: 'user',
requires: [
'MyApp.view.admin.UsersGrid',
'MyApp.view.admin.UserModel',
'MyApp.view.admin.UserController',
'MyApp.model.User'
],
viewModel: {
type: 'user'
},
controller: 'user',
frame: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'users-grid',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
glyph: MyApp.util.Glyphs.getGlyph('add'),
hidden: **[config.canAdd]**
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Edit',
hidden: **[config.canEdit]**
hidden: this.setElementConfiguration,
glyph: Mofeg.util.Glyphs.getGlyph('edit'),
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Eliminar',
glyph: MyApp.util.Glyphs.getGlyph('destroy'),
listeners: {
click: 'onDelete'
}
}
]
}
]});
I want to apply the hidden properties of the buttons based on the initial configurations, how can I accomplish it?
You can write an initComponent:
initComponent: function () {
var me = this,
editButton = Ext.ComponentQuery.query('button[itemId=edit]')[0],
canEdit = me.getCanEdit();
editButton.setHidden(canEdit);
me.callParent(arguments);
}
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 am trying to get an instance of my view within the controller. How can I accomplish this. The main reason I am trying to do this is that I have a grid in my view that I want to disable until a selection from a combobox is made so I need to have access to the instance of the view.
Help?
My controller:
Ext.define('STK.controller.SiteSelectController', {
extend: 'Ext.app.Controller',
stores: ['Inventory', 'Stacker', 'Stackers'],
models: ['Inventory', 'Stackers'],
views: ['scheduler.Scheduler'],
refs: [{
ref: 'stackerselect',
selector: 'panel'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
/* render all default functionality */
onPanelRendered: function () {
var view = this.getView('Scheduler'); // this is null?
}
});
My view:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel']);
var filters = {
ftype: 'filters',
autoReload: false,
encode: false,
local: true
};
Ext.define('invtGrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.inventorylist',
title: 'Inventory List',
store: 'Inventory',
multiSelect: true,
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'invtGridDDGroup',
dropGroup: 'stackerGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
features: [filters],
stripeRows: true,
columns: [{
header: 'OrdNum',
sortable: true,
dataIndex: 'ordNum',
flex: 1,
filterable: true
}, {
header: 'Item',
sortable: true,
dataIndex: 'item',
flex: 1,
filterable: true
}, {
header: 'Pcs',
sortable: true,
dataIndex: 'pcs',
flex: 1,
filterable: true
}]
});
Ext.define('stackerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.stackerselect',
title: 'Stacker Select',
store: 'Stacker',
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'stackerGridDDGroup',
dropGroup: 'invtGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
columns: [{
header: 'OrdNum',
dataIndex: 'ordNum',
flex: 1
}, {
header: 'Item',
dataIndex: 'item',
flex: 1
}, {
header: 'Pcs',
dataIndex: 'pcs',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Submit',
action: 'submit'
}, {
text: 'Reset',
action: 'reset'
}]
}, {
xtype: 'toolbar',
dock: 'top',
items: [{
id: 'combo',
xtype: 'combobox',
queryMode: 'local',
fieldLabel: 'Stacker',
displayField: 'stk',
valueField: 'stk',
editable: false,
store: 'Stackers',
region: 'center',
type: 'absolute'
}]
}]
});
Ext.define('STK.view.scheduler.Scheduler', {
extend: 'Ext.panel.Panel',
alias: 'widget.schedulerview',
title: "Scheduler Panel",
layout: {
type: 'column'
},
items: [{
xtype: 'inventorylist',
width: 650,
height: 600,
columnWidth: 0.5,
align: 'stretch'
}, {
xtype: 'stackerselect',
width: 650,
height: 600,
columnWidth: 0.5
}]
});
As I said, Extjs creates getter for your views (those listed in the controller's view array) and you get access to them:
var view = this.getSchedulerSchedulerView();
Once you have the view reference you can do this to get access to the contained grid:
var grid = view.down('.inventorylist');
grid.disable();