Related
I have an ExtJS 6.5.1 app and I am just now starting to migrate our app from MVC to MVVM, so I am pretty clueless about VM and VC.
I have a viewModel with an inline store like so:
Ext.define("MYAPP.view.ViewportViewModel",{
extend:"Ext.app.ViewModel",
alias: 'viewmodel.viewport',
constructor: function(config) {
var me = this;
this.callParent(arguments);
me.setStores({
info: {
autoLoad:true,
fields:["TEST"],
proxy:{
type:"ajax",
url:"blah.html",
reader:{
type:"json"
}
}
}
});
}
});
From inside my controller, how can I "get" the store so I can change the URL, reload, pass extraParams etc?
Thanks
You can get your store using this.getViewModel().getStore('info') inside of ViewController.
After getting store you can set another url using store.getProxy().setUrl(), load using store.load() and for sending extra params store.getProxy().extraParams.
Here is example
//this one way
store.load({
url: '{your url here}',
params: {
userid: 22216
}
});
//this another way
store.getProxy().setUrl('{your url here}');
store.getProxy().extraParams = {
userid: 22216
};
store.load();
In this FIDDLE, I have created a demo using view model and view controller. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onRefreshButtonTap: function () {
var info = this.getViewModel().getStore('info');
info.getProxy().setUrl('data2.json');
info.load();
}
});
Ext.define("ViewportViewModel", {
extend: "Ext.app.ViewModel",
alias: 'viewmodel.myvm',
constructor: function (config) {
var me = this;
this.callParent(arguments);
me.setStores({
info: {
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: ''
}
}
}
});
}
});
//creating panel with GRID and FORM
Ext.create({
xtype: 'panel',
controller: 'myview',
title: 'Binding Example',
renderTo: Ext.getBody(),
viewModel: {
type: 'myvm'
},
layout: 'vbox',
items: [{
xtype: 'grid',
flex: 1,
width: '100%',
bind: '{info}',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
itemclick: 'onGridItemClick'
}
}],
tbar:[{
text:'Refresh',
handler:'onRefreshButtonTap'
}]
});
}
});
I have a controller and a view and want to push a line from a controller when item is selected.
Where it says onItemSelect: that's where I need to make a call, and don't know how...
Thank you.
controller is this:
Ext.define('Application.controller.ItemController', {
// Extend basic controller object
extend: 'Ext.app.Controller',
// Attach store classes to this controller
stores: ['Items'],
// Attach model classes to this controller
models: ['Item'],
// ..and last but not least - the view classes
views: ['item.List', 'item.Show'],
// Refs parameter defines references to certain
// instances of components pointed by selector
refs: [
{
// Ref determines the name of the automagic
// this.get[ref-goes-here] method that returns
// instance of certain component
ref : 'itemShowDesc',
// Select #item-description component in
// item.Show view
selector: 'itemShow > #item-description'
}
],
// when including the controllers in your application,
// the framework will automatically load the controller
// and call the init method on it
init: function() {
this.control({
'itemList' : {
// Action to be performed on select
select: this.onItemSelect
}
});
},
onItemSelect: function (selModel, selection) {
// Executed only when selection is a leaf
(selection.data.leaf) ? this.getItemShowDesc().addRow(selection.raw.description,'','','','','','') : null;
}
});
and the view is this:
Ext.define('Application.view.item.Show', {
extend: 'Ext.grid.Panel',
alias : 'widget.itemShow',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Application.model.Item'
],
xtype: 'cell-editing',
title: 'Favorite Books',
frame: true,
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: 680,
height: 350,
plugins: [this.cellEditing],
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: Application.model.Item,
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'resources/data/grid/books.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'book'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
}),
columns: [{
header: 'Book Id',
dataIndex: 'item_id',
width: 100
}, {
header: 'Author',
dataIndex: 'author',
width: 100
}, {
header: 'Title',
dataIndex: 'title',
width: 250
},{
header: 'Description',
dataIndex: 'description',
width: 495
},{
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney'
},{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
}
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
addRow: function(inItemID,inDisplay,inSex,inAuthor,inTitle,inDescription,inPrice){
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
item_id: inItemID,
display: inDisplay,
sex: inSex,
author: inAuthor,
title: inTitle,
description: inDescription,
price: inPrice
}, 'Item');
store.insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
}
,
loadStore: function() {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'Favorites were loaded, data available for processing',
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
},
onRemoveClick: function(grid, rowIndex){
this.getStore().removeAt(rowIndex);
}
})
Your ref for itemShowDesc is selecting a child component of itemShow. So when you do this.getItemShowDesc().addRow(), you're calling a method on whatever #item-description is, not on the Application.view.item.Show class.
I have this code :
Ext.define('MyDesktop.Opport', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer',
/***********************/
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
/***********************/
],
id:'opp',
createWindow : function(){
var storeop = Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'ajax',
url: 'PHP/afficherop.php',
reader: {
type: 'json', // format fichier : JSON
root: 'enregistrements', // D?but des donn?es
idProperty: 'id' // cl? primaire
}
},
fields: ['id','date','infos','idProd','idcl']
});
var storecl = Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'ajax',
url: 'PHP/afficher.php',
reader: {
type: 'json', // format fichier : JSON
root: 'enregistrements', // D?but des donn?es
idProperty: 'id' // cl? primaire
}
},
fields: ['id','type','nom','prenom','mat']
});
storecl.load();
var desktop = this.app.getDesktop();
var win = desktop.getWindow('opp');
/*******************/
if(!win){
win = desktop.createWindow({
id: 'opp',
title:'Opportunités',
width:500,
height:480,
iconCls: 'bogus',
animCollapse:false,
constrainHeader:true,
layout: 'border',
align: 'center',
items: [
{
xtype: 'grid',
flex: 1,
split: true,
border: true,
region: 'center',
store: storecl,
title: 'Client',
columns: [
// new Ext.grid.RowNumberer(),
{text: 'ID',dataIndex: 'id'},
{ text: 'type',align: 'center',dataIndex: 'type'},
{ text: 'nom',align: 'center',dataIndex: 'nom'},
{ text: 'Prénom',align: 'center',dataIndex: 'prenom'},
{ text: 'Matricule',align: 'center',dataIndex: 'mat'}
],
listeners: {itemdblclick: function(grid ,record){
var rr = grid.getSelectionModel();
var rs = rr.getSelection();
var idc = rs[0].get('id');
Ext.Ajax.request({
url: 'PHP/op.php',
params: {
idcl: idc
}
});
storeop.load({params:{idcl: idc}});
}}
},{
xtype: 'grid',
flex: 1,
region: 'south',
border: true,
store: storeop,
title: 'Liste des opportunités',
columns: [
// new Ext.grid.RowNumberer(),
{text: 'ID',dataIndex: 'id'},
{ text: 'Date',align: 'center',dataIndex: 'date'},
{ text: 'Info',align: 'center',dataIndex: 'infos'},
{ text: 'Produit',align: 'center',dataIndex: 'idProd'},
{ text: 'CLient',align: 'center',dataIndex: 'idcl'}
]
}
]
})
}
return win;
}
});
I want the second grid to dsiplay the records loaded from the store storeop with parameters selected from the first grid. Any help?
you can get the selected row from the first grid:
var selectedRecord = firstGrid.getSelectionModel().getSelection()[0];
here, i assume that you have a single selection model. To load this selectedRecord to your second grid, you have to loadData to its store.
list.push(selectedRecord.data);
secondGrid.store.loadData(list, false);
take note that you have to use different store for each grid.
You need a second Store instance for your second grid. Do not use the same store for both grids.
Am having a tree view which gets its data from the tree store. But, however, am able to see only the small folders that gets displayed as part of a tree structure. the name of the nodes is not getting displayed, and when i try to print the record, it just says that its an empty string. Here is the code:
App/View
Ext.define('App.view.Hierarchy', {
alias: 'widget.hierarchy',
extend: 'Ext.panel.Panel',
initComponent: function () {
var config = {
xtype: 'panel',
border: false,
autoScroll: true,
baseCls: 'topMenu',
html: '<div class="PageTitle" style="width:600px;"><b>' + LANG.HIERARCHYT + '</b><br>' + LANG.HIERARCHYTxt + '<br>' + '</div>',
items: [{
xtype: 'toolbar',
border: false,
dock: 'top',
items: [{
xtype: 'button',
text: LANG.BTADDREG,
iconCls: 'icon-add-tb',
cls: 'tip-btn',
iconAlign: 'right',
action: 'addRegion',
id: 'ADDREGION'
}]
},
{
xtype: 'treepanel',
title: 'Hierarchy Tree',
id: 'hierarchyTree',
border: false,
alias: 'widget.hierarchyTree',
height: 1000,
viewConfig: {
enableDD: true,
plugins: {
ptype: 'treeviewdragdrop'
}
},
collapsible: false,
useArrows: true,
rootVisible: false,
store: Ext.create('Campus.store.HierarchyTree'),
displayField: 'Title',
multiSelect: false,
singleExpand: false,
}]
}
var holder = Ext.getCmp('center');
holder.remove(0);
holder.add(Ext.apply(config));
this.callParent(arguments);
}
});
Model
Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID']
});
Store
Ext.define('App.store.HierarchyTree', {
extend: 'Ext.data.TreeStore',
model: 'App.model.HierarchyTree',
storeID: 'HierarchyTree',
proxy: {
type: 'ajax',
url: 'data/Locations.aspx',
reader: {
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST'
},
extraParams: {
mode: 'HIERARCHYFULLLIST'
}
},
autoLoad: true
});
Controller
Ext.define('App.controller.Hierarchy', {
extend: 'Ext.app.Controller',
stores: ['Me', 'Regions', 'Areas', 'Towns', 'HierarchyTree'],
model: ['Me', 'Teams', 'Regions', 'User', 'HierarchyTree'],
views: ['App.view.Hierarchy', 'App.view.AddRegions'],
refs: [{
ref: 'myHierarchyTree',
selector: 'hierarchyTree'
}],
init: function () {
this.getHierarchyTreeStore().load();
this.control({
'button[action=addRegion]': {
click: this.addRegion
},
'#hierarchyTree': {
itemclick: this.itemclick
}
})
},
itemclick: function (view, record) {
console.log(record.get('Title'))
}
});
Also, the JSON thats being returned is:
{"text":".","children": [{"text":"Asia Pacific","id":"537","level":"1", "expanded":
false,"singleClickExpand":true,"children":[{"text":"Japan", "cls":"xtreenode-Level2-
Indent", "id":"538", "hl1":"537","level":"2","singleClickExpand":true, "expanded":
false, "children":[]},
Treepanel's display field defaults to text, which is ok with the json being returned, but the problem is the store model, which should include as fields the text, cls ..and other attributes you have in your json. Otherwise these will not be mapped to the records and you get empty text.
Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID', 'text', 'level','cls,....]
EDIT
You have modified the displayField to be the Title, but the json doesn't contain the title attribute. You have to simple fixes, either you modify the model if the text is actually the title. You can do this by setting a mapping to the field.
Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : [{name:'Title',type:'string',mapping:'text'}, 'ID', 'LevelID', 'ParentID',]
This will cause the Title to be populated by the text values from the json.
Also you can remove the displayField config and then the text value will be applied, but this will still mean that the 'Title' value will be empty.
OK, finally got it:)
Set the displayfield in the tree to 'text'
displayfield : 'text'
And, Once again thank you nscrob
And one more question, could you please give me any guidance on how to open different views depending upon the level in the tree that is being clicked
This works.
if (record.get('level')==1)
{
this.erWin = Ext.create('App.view.EditRegions');
this.erWin.showWin();
}
else{
//open another_view
}
I am having issue setting up pagination.
using the following example.
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
I have create a store in a separate file.
ie /app/store/tasks.js
app/store/tasks.js
Ext.define('AM.store.Tasks', {
extend: 'Ext.data.Store',
model: 'AM.model.Task',
autoLoad: true,
pageSize: 2,
proxy: {
type: 'ajax',
api: {
read: '/WarehouseProductImport/IndexGrid',
update: 'data/updateTasks.json'
},
reader: {
type: 'json',
root: 'tasks',
totalProperty: 'total',
successProperty: 'success'
}
}
});
in my app.js
launch: function () {
Ext.create('Ext.container.Container', {
width: 950,
height: 500,
renderTo: 'panelcontainer',
items: [
{
xtype: 'tasklist',
title: 'Tasks',
html: 'List of tasks will go here'
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: '', // how do i get this store as it's define in 'store/task.js'
dock: 'bottom',
displayInfo: true
}]
});
}
In the above method, "store" isn't initialized. Am i putting this method in the correct place. Are there any examples on how to set up pagination when the store is separated like above.