I have a grid with a row widget :
{
xtype: 'gridpanel',
margin: '10 0 0 0',
reserveScrollbar: true,
enableColumnHide: false,
shallowGrouping: true,
flex: 1,
emptyText: 'No data available',
plugins: [
{
ptype: 'columnsmanager'
},
{
ptype: 'gridfilters'
},
{
ptype: 'gridexporter'
},
{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
bind: {
store: '{record.allocations}'
},
plugins: [
{
ptype: 'gridfilters'
}
],
viewConfig: {
stripeRows: true,
isRowWidget: true
},
columns:
[
{
xtype: 'datecolumn',
text: 'Date',
dataIndex: 'creationDate',
format: 'Y-m-d H:i',
filter: 'date',
width: 120
},
{
xtype: 'gridcolumn',
text: 'Portfolio',
dataIndex: 'portfolioShortName',
filter: 'string',
width: 250
}
{
...
}
]
}
}
],
selModel: {
selType: 'rowmodel',
mode: 'SINGLE',
},
listeners: {
afterrender: 'onGridAfterRender',
selectionchange: 'onGridSelectionChange'
},
bind: {
store: '{Orders}'
},
rowViewModel: true,
columns: [ ... ]
}
The property 'portfolioShortName' is defined in a model
{
name: 'portfolioShortName',
mapping: 'portfolio.shortName'
}
Which is a nested object of another object
hasMany: {model: 'Xxx.model.oms.Order', name: 'allocations', associationKey:'allocations'}
The problem is when I click on the row expander ExtJs make a http call to get the file and triggers a http error 404, the error is triggered but the fields are visible.
I tried without 'hasMany' in the parent object and using 'tpl' or 'renderer' in the grid but this does not work. The issue is only for nested object, properties are displayed properly.
Related
I want my view access a function was defined in my controller.
If i define a function out of define in controller the code works if not i get the error 'Uncaught ReferenceError: refreshSelection is not defined'
Whats is wrong?
View
initComponent: function() {
this.dockedItems = [
{
xtype: 'toolbar',
items: [
{
text: 'Importar',
action: 'selimp',
tooltip: 'Importar TXT'
},{
text: 'Excluir',
action: 'delete',
tooltip: 'Deletar Registros'
},{
text: 'Excluir Todos',
action: 'deleteAll',
tooltip: 'Deletar todos os Registros'
},{
text: 'Transferir Dados',
action: 'transfDados',
tooltip: 'Transferencia de registros'
}
]
},{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: 'GridStore',
displayInfo: true,
emptyMsg: "Nenhum registro encontrado."
}
];
this.callParent(arguments);
this.getView().on('refresh', refreshSelection , this);
this.selModel.on('select', selectRow , this);
this.selModel.on('deselect', deselectRow , this);
}
Controller
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
stores: ['GridStore'],
models: ['Espelho'],
views: ['GridView'],
refs: [ {ref: 'GridV',selector: 'grid'} ],
init: function() {
//declaracao dos controles dos botoes
this.control({
'gridV': {
deselect: this.deselectRow
},
'gridV': {
select: this.selectRow
},
'gridV': {
refresh: this.refreshSelection
}
});
},
selectRow: function(){
console.log('selectRow-1');
},
deselectRow: function(){
console.log('deselectRow-1');
},
refreshSelection: function(){
console.log('refreshSelection-1');
},
........
Man you're doing it wrong!
You can't use the Controller Reference to place a controller action.
Instead use the same CSS-like selector of your grid.
All functionality must be in your controller. The controler action (this.Control) will bind the function with the event.
Your controller must look like this:
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'GridV',
selector: 'grid'
}
],
selectRow: function(rowmodel, record, index, eOpts) {
console.log('Foo');
},
init: function(application) {
this.control({
"grid": {
select: this.selectRow
}
});
}
});
In your view just eliminate the business code.
Ext.define('ImpPdf.view.MyViewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.grid.Panel',
'Ext.grid.column.Number',
'Ext.grid.column.Date',
'Ext.grid.column.Boolean',
'Ext.grid.View',
'Ext.toolbar.Paging'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
store: 'GridStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'GridStore'
}
]
}
]
});
me.callParent(arguments);
}
});
Based on newly created Sencha Touch 2 app as it is learned here.
Then I'd like to add my nested list - hierarchical menu tree and found that doesn't matter - my store inline or my store read from json - nothing displayed inside tab 'Menu'.
What's wrong?
Important files / code fragments:
MVC section in app.js:
// MVC
views: [
'Main'
],
models: [
'MenuItem'
],
stores: [
'MenuTree'
],
view.Main.js:
Ext.define('MobilePost.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.data.TreeStore',
'Ext.dataview.NestedList',
'Ext.data.proxy.JsonP',
'MobilePost.store.MenuTree'
],
config: {
tabBarPosition: 'bottom',
items: [
{
// From tutorial, working
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>'
].join("")
},
{
// From tutorial, working
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
displayField: 'title',
store: {
type: 'tree',
fields: [
'title', 'link', 'author', 'contentSnippet', 'content',
{ name: 'leaf', defaultValue: true }
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function( nestedList, list, index, element, post ) {
this.getDetailCard().setHtml(post.get('content'));
}
}
},
{
// Mine, not working
xtype: 'nestedlist',
title: 'Menu',
iconCls: 'settings',
store: 'MenuTree'
}
]
}
});
Model - model.MenuItem.js:
Ext.define('MobilePost.model.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: [
'id', // Menu item id for events
'text', // Menu item text
{ name: 'leaf', defaultValue: false }
]
}
});
Store - store.MenuTree.js:
Ext.define('MobilePost.store.MenuTree', {
extend: 'Ext.data.TreeStore',
requires: [ 'MobilePost.model.MenuItem' ],
type: 'tree',
defaultRootProperty: 'items',
config: {
model: 'MobilePost.model.MenuItem',
/*
// TODO: inline store - uncomment to use
root: {
items: [
{
id: 'settings',
text: 'Settings',
items: [
{
id: 'shift',
text: 'Working shift',
leaf: true
},
{
id: 'users',
text: 'Users',
leaf: true
},
{
id: 'cash',
text: 'Cash',
leaf: true
}
]
}
]
}*/
// TODO: JSON store - comment for inline store
proxy: {
type: 'ajax',
url: 'menu.json'
}
},
// TODO: JSON store - comment for inline store
root: {}
});
JSON - menu.json (valid, passed check by jsonlint.com):
{
"items": [
{
"id": "settings",
"text": "Settings",
"items": [
{
"id": "shift",
"text": "Working shift",
"leaf": true
},
{
"id": "users",
"text": "Operators",
"leaf": true
},
{
"id": "cash",
"text": "Cash",
"leaf": true
}
]
}
]
}
At what point your store is loaded? Shouldn't you use autoLoad:true in your store?
also if you don't want to create and load your store with application load you should manually create store whenever required and set it to list
var treeStore = Ext.create('MobilePost.store.MenuTree');
treeStore.load();
and use this as store attribute in your view
{
// Mine, not working
xtype: 'nestedlist',
title: 'Menu',
id: 'myListId',
iconCls: 'settings',
store: treeStore
}
OR set the store if view is already created
Ext.getCmp('myListId').setStore(treeStore);
I need the tab-panels to fit browser window size. I have used card layout, and it is not re-sizing to fit the browser window. I think i'm missing some properties in my viewPort.
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'tabP1' }
},
{
xtype: 'panel',
items: { xtype:'tabP2' }
}
,
{
xtype: 'panel',
items: { xtype:'tabP3' }
}
]
});
},
2.) One of my tabpanels; I am using absolute layout. I am using this layout because it's easy to set form components where i ever i desire it to be. Therefore, i would like a solution that works with the same layout.
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.tabP1',
// height: 250,
// width: 726,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
UPDATE 2
UPDATE 2
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'tabP1'
},
{
xtype:'tabP2'
}
,
{
xtype:'tabP3'
}
]
});
},
onSuccess: function() {
this.getViewport().getLayout().setActiveItem(1);
},
I get an error when i use your code, saying that this.getViewport().getLayout().setActiveItem(1) is not a function. I think this is because i used border layout. How can i resolve this ?
Your problem is "over-nesting" Why are you putting 'tabPFoo' inside a panel with no layout? They are at best, redundant, also causing the layout system to spend more cycles when it's not needed.
Ext.require('*');
Ext.onReady(function(){
var vp = new Ext.container.Viewport({
layout: 'card',
items: [{
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 1'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 2'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 3'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.previousSibling().previousSibling();
vp.getLayout().setActiveItem(next);
}
}
}]
});
});
Obviously that's not MVC style, but that's the structure the layout should take.
In a small program that I have, I'm trying to have custom containers for every leaf node of my Nested List.
Here are a couple arbitrary example containers that I'm trying to test with:
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #a9a9a9;',
// flex: 1,
items: [{
html: 'Detail Container1'
}]
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #c9c9c9;',
// flex: 1,
items: [{
html: 'Detail Container2',
flex: 1
}, {
xtype: 'button',
text: 'Hit me!',
flex: 1
}]
});
How can I switch in the new containers when the user clicks on the leaf node?
This action should happen in onLeafItemTap(). Btw the initial container (#2) isn't showing at the moment. Is this a layout issue?
Here's some idea of what the screen should look like:
Complete source:
Ext.Loader.setConfig({
enabled: true
});
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #a9a9a9;',
// flex: 1,
items: [{
html: 'Detail Container1'
}]
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
layout: {
type: 'vbox'
},
height: 300,
style: 'background-color: #c9c9c9;',
// flex: 1,
items: [{
html: 'Detail Container2',
flex: 1
}, {
xtype: 'button',
text: 'Hit me!',
flex: 1
}]
});
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Ext.define('Sencha.view.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
layout: {
type: 'hbox'
},
initialize: function() {
this.treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [{
text: 'Containers',
items: [{
text: 'Detail #1',
leaf: true
}, {
text: 'Detail #2',
leaf: true
}]
}]
}
});
this.detailContainer = Ext.create("DetailContainer2", {});
this.nestedList = Ext.create('Ext.NestedList', {
docked: 'left',
width: 300,
flex: 1,
store: this.treeStore,
detailCard: true,
detailContainer: this.detailContainer,
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.detailContainer, this.nestedList]);
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
// nestedList.setDetailContainer(Ext.create("DetailContainer1", {}))
// detailCard.setHtml(record.get('text') + "...");
}
});
Ext.application({
launch: function() {
var container = Ext.create("Ext.Container", {
layout: {
type: 'hbox'
},
items: [{
xtype: 'mainview'
}]
});
Ext.Viewport.add(container);
}
});
Finally I've figured out the proper way to solve your problem.
Some explanations:
If you want to display "customized detailContainer" at the right side of your hbox, it's quite obvious that you should disable detailCard config for your Ext.NestedList because it's designed to display inline (i.e. take place of your Ext.NestedList).
When using Ext.define, everything should be included in config (except extend, xtype, alias, id, so in this case, layout has to be put in config).
flex should be defined in config as well.
At leafitemtap event, simply update your detailContainer config and remove/add it again as it would not be updated dynamically.
Please take a look at modified code snippet below, it works perfectly for me.
Ext.Loader.setConfig({ enabled: true });
Ext.define('DetailContainer1', {
extend: 'Ext.Container',
xtype: 'detail-container1',
config: {
flex: 1,
layout: {
type: 'vbox'
},
style: 'background-color: #a9a9a9;',
items: [
{html: 'Detail Container1'}
]
}
});
Ext.define('DetailContainer2', {
extend: 'Ext.Container',
xtype: 'detail-container2',
config: {
flex: 1,
layout: {
type: 'vbox'
},
style: 'background-color: #c9c9c9;',
items: [
{html: 'Detail Container2', flex: 1},
{xtype: 'button', text: 'Hit me!', flex: 1}
]
}
});
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Ext.define('Sencha.view.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
id: 'mainview',
config: {
layout: {
type: 'hbox'
},
},
initialize: function() {
this.treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Containers',
items: [
{ text: 'Detail #1', leaf: true },
{ text: 'Detail #2', leaf: true }
]
}
]
}
});
this.detailContainer = Ext.create("DetailContainer2");
this.nestedList = Ext.create('Ext.NestedList', {
flex: 1,
store: this.treeStore,
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
});
this.setItems([this.nestedList, this.detailContainer]);
},
onLeafItemTap: function(nestedList, list, index, node, record, e) {
mainview = Ext.getCmp('mainview');
if (index==0) {
mainview.detailContainer = Ext.create("DetailContainer1");
} else {
mainview.detailContainer = Ext.create("DetailContainer2");
}
mainview.removeAt(1);
mainview.add(mainview.detailContainer);
}
});
Ext.application({
launch: function() {
Ext.Viewport.add(
Ext.create("Ext.Container", {
layout: {
type: 'card'
},
items: [
{ xtype : 'mainview'}
]
}));
}
});
I am using Sencha Touch 1.1. The following code makes up the view:
truApp.views.IncidentParentView = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
align: 'top'
},
initComponent: function () {
this.sectionStore = Ext.StoreMgr.get(TrafficResponse.Stores.IncidentSections);
this.topToolbar = new Ext.Toolbar({
items: [
{
text: 'Cancel',
ui: 'back',
handler: function() {
Ext.dispatch({
controller: truApp.controllers.incidentController,
action: 'cancel'
});
}
},
{
xtype: 'spacer'
},
{
text: 'Submit',
ui: 'confirm',
handler: function() {
Ext.dispatch({
controller: truApp.controllers.incidentController,
action: 'submit'
});
}
}
]
});
this.dockedItems = [ this.topToolbar ];
this.items = [
{
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
title: 'Sections',
ui: 'light'
}
],
items: [
{
xtype: 'list',
store: this.sectionStore,
scroll: false,
itemTpl: '{Description}',
listeners: {
itemTap: function(dataView, index, item, e) {
var record = dataView.store.getAt(index);
truApp.views.incidentParentView.getComponent('incidentCardPanel').setActiveItem(
index,
{ type: 'slide', direction: 'left' }
);
},
afterrender: function(dataView) {
dataView.getSelectionModel().select(0, false, false);
truApp.views.incidentParentView.getComponent('incidentCardPanel').setActiveItem(
0,
{ type: 'slide', direction: 'left' }
);
}
},
onItemDisclosure: true
}
]
},
{
flex: 3,
id: 'incidentCardPanel',
xtype: 'panel',
layout: 'card',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
},
{
html: 'card 3'
},
{
html: 'card 4'
},
{
html: 'card 5'
},
{
html: 'card 6'
}
]
}
];
truApp.views.IncidentParentView.superclass.initComponent.call(this);
}
});
When the 'card' layout is used, nothing is displayed. When 'vbox' is used, all 6 items - card 1 to card 6 are displayed.
Why are the items not displaying when using card layout?
try to add fullscreen: true to your card layout settings. Didn't test, but is my first guess