I accidentally deleted this post before, so I am resubmitting :\
I'm new to Ext JS and MVC in general and am toying with creating an app with a chart nested within a panel nested within a border panel within an app. [From top to bottom it goes Viewport > bordered panel > panel in 'center region' > chart]
The reason why I'm nesting a panel within the border panel is that the nested panel will hold both the chart as well as a toolbar for the chart, both of which are dynamic depending on the user's selection.
While simply having the border panel reference the externally defined chart view works well, once I try having it reference an externally defined panel view it throws 'Uncaught TypeError: Cannot call method 'substring' of undefined', and Aptana gives me a 'name is undefined' namespace error whether or not I have the nested panel reference the chart or simply be left empty. I have double checked my name spacing so I'm a little lost in where to start looking for the problem.
My base application file is as follows:
Ext.application({
name: 'Chart',
appFolder: 'chart',
controllers:['sidebar.Navigation', 'commoditycontrol.Commoditycontrol',
'chart.oil.Spreads'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
xtype: 'commoditycontrol',
}, {
region: 'east',
xtype: 'sidebarnavigation',
}, {
region: 'center',
xtype: 'oilbase',
}]
});
},
});
The 'oilbase' view is simply a panel that imports the chart and chart toolbar view (in this case I've left the toolbar view out)
Ext.define('Chart.view.base.Oil', {
extend: 'Ext.panel.Panel',
alias: 'widget.oilbase',
name: 'oilbase',
layout: 'fit',
items: [{
xtype: 'oilspreads'
}]
});
And here's the chart view 'oilspreads'
Ext.define('Chart.view.chart.oil.Spreads', {
extend: 'Ext.chart.Chart',
alias: 'widget.oilspreads',
name: 'oilspreads',
layout: 'fit',
store: 'Chart.store.oil.Spreads',
config: {
style: {
background: '#333333'
},
},
axes: [
{
title: 'Close',
type: 'Numeric',
position: 'left',
fields: ['close'],
minimum: 0,
maximum: 100,
cls: 'axis'
},
{
title: 'Month',
type: 'Category',
position: 'bottom',
fields: ['month'],
cls: 'axis'
}
],
series: [
{
type: 'line',
xField: 'month',
yField: 'close'
}
]
});
Again, everything works fine if I reference the chart view in the application rather than the 'oilbase' empty panel. If I reference the default panel xtype, everything works as well.
Is nesting panels simply discouraged? My gut feeling is that I'm simply missing an obvious namespacing issue but I would appreciate a 2nd set of eyes, as well as comments as to my approach to the MVC pattern for ExtJs in general.
Thanks
For the view to be loaded correctly it has to be defined either in the views config of your app, or in the views config of one of the controllers.
Related
I'm using Extjs 6.0 (with Framework Codeigniter 3.0.3).
I'm trying to get something like this:
+---------------------------+-------------+
| something | something | something |
+-------------+-------------+-------------+
| Label A| Label B |
+-------------+-------------+-------------+
I'm using table layout (Label A with colspan 2).
The problem is I need different aligning in Label A and Label B (right and center respectively).
Is there a way to accomplish this?
This is the code:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 400,
height: 200,
layout: {
type: 'table',
columns: 3
},
items: [{
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
},{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
}, {
xtype: 'label',
text: 'Label B',
padding: 5
}],
});
For Label A, I've tried adding (without effect):
align: 'right'
textAlign: 'right'
labelAlign: 'right'
If I add:
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
textAlign: 'right'
}
}
}
Then both Label A and Label B align to the right, and that's not what I need.
you can use the following code to align Label A to the right:
{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
style:{
"float":"right"
}
},
Labels are somehow special, presumably because they are made for the purpose to be used by labelable. A label is intended to be used together with a field, and when you click the label, that field is focused. The labelable mixin of the field does the aligning (based on the labelAlign configuration), and label does not always respect the layout you ask for.
While the answer of #Saloo seems to work, it is a hack that may break in other themes and/or older browsers and/or different versions of the framework.
It would be better to use different means of displaying text. I have come to use a container with the html configuration. With a container, style:{textAlign:"right"} works as intended, and since "text-align" is a local CSS setting that does not require the browser to think outside the box, it should be safe enough to use across browsers, across themes, across framework versions.
I have the following button within a Panel within a view:
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
handler: function(){
view.push('TouchNuts.view.Transactions',{
title: 'New views title',
html: 'Some content'
});
}
}
]
I would like to navigate to a page that consists of a list 'TouchNuts.view.Transactions' when I click it. Any ideas?
view needs to be a reference to your NavigationView. One way of getting that reference is by giving it an id and then using Ext.getCmp to fetch the component:
{
xtype: 'navigationview',
id: 'my-id',
items: [...]
}
Ext.getCmp('my-id');
I have an Image Component in ExtJS which loads an image via URL like this:
{
xtype: 'image',
width: 200,
height: 200,
src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg'
},
The image is displayed at 100%. 200x200 px are shown and the rest is clipped. I didn't find any property to allow scaling.
What is the best way to achieve a resizing image in ExtJS?
You can use xtype:'image' , shrinkWrap:true
Please check with Ext js api http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap
A bit late...but I think this is kind of what you wish to have, I happened to use the image as a scaled background behind a panel instead of an image on top inside a panel, but the theory is the same:
//here is your view file
Ext.define('This_Is_A_Panel_On_Top_Of_A_Background_Container.view.MyViewport', {
extend: 'Ext.container.Viewport', //my root view port
layout: {type: 'fit'},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container', //my background image
html: '<img id="imgEl" src="'+Ext.BLANK_IMAGE_URL+'">',
layout: {type: 'border'},
items: [{
xtype: 'panel', //my panel on top of background
region: 'center',
bodyCls: 'transparent',
title: 'My Panel'
}]
}]
});
me.callParent(arguments);
}
});
Note that I didn't use image component, I used a container. html: <img ... and bodyCls: transparent... did the trick. You can change the image dynamically in a handler. Something like this:
//then say, in afterRender event, in your controller file
var imgEl = Ext.get('imgEl');
Ext.fly(imgEl).setStyle({
backgroundImage: 'wallpaper.jpg',
width: '100%',
height: '100%'
}).show();
I have weird situation that extjs 4 always puts last word of custom error message in new row, and effectively hides it. I tried shortening message, but always last word goes to new line. This happens in Firefox 7.0.1 (firebug turned off), not in Chrome, Opera, Safari.
Default message text is displayed correctly. My error message has no strange letters or symbols.
I tried escaping white characters, putting nobr tags etc... but nothing works.
How to prevent this behavior?
I have no any css or any other styling applied. Here is code from view:
this.items = [{
waitMsgTarget: 'dailyReport',
xtype: 'form',
url: 'php/dailyReport.php',
items: [{
margin: 10,
xtype: 'datefield',
name: 'reportDate',
fieldLabel: 'Report for',
format: 'd.m.Y.',
altFormats: 'd.m.Y|d,m,Y|m/d/Y',
value: getCorrectDate(),
disabledDays: [0]
},
{
margin: 10,
xtype: 'checkboxgroup',
fieldLabel: 'Report by',
columns: 2,
vertical: true,
allowBlank: false,
blankText: 'Choose at least one.',
items: [{
boxLabel: 'pos',
name: 'rb',
inputValue: '1',
checked: true
},
{
boxLabel: 'seller',
name: 'rb',
inputValue: '2',
checked: true
}]
}]
}];
'Ctrl' + '+' was reason. My view in Firefox was zoomed in, but I didn't notice it until today. After I returned it to normal zoom level 'Ctrl' + '0' everything works and shows up fine. Silly me, it took me 2 weeks to realize this.
I want to use qtip with jqgrid and show a different image depending on which row is selected within the jqgrid. The path of the image could be within the jqgrid as a hidden cell. I have looked around but can't find any documentation on if jqgrid has a relevant row selector that could be used. Does anyone know the selector I want or if I should be trying for a different approach altogether?
The only selector that worked so far is below but it is for the entire grid. I have tried a few things to specify the row but nothing has worked. Any help would be appreciated.
$('#gridtable').qtip({
content: 'Some text',
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
My solution was to place an icon within each row that had a wine image and assign it the id of the row. This meant that each row could be given a unique class to hover over. Not pretty but it worked.
if((gridRow['photo'] != "false"))
{
$("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+' <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});
path = '<img src="images/winephotos/'
+ gridRow['id']
+'.jpg" width="350" height="450" alt="Wine Image"'
+' class="resize"/>';
$('.imageicon'+i).qtip({
content: $(path)
,
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
},
show: {
when: 'click',
//ready: true,
solo: true
},
hide: {
when: {
event: 'click',
event: 'mouseout'
}
},
style: {
width: { max: 280 },
name: 'dark'
}
});
}
gridRow=false;
}