PDA

View Full Version : widgets folder under classic/src



heljo05
22 Apr 2015, 12:03 PM
Hi,

I have been discussing with Kevin Cassidy about an issue regarding folder structures.

https://support.sencha.com/index.php#ticket-22625

As per EXTJS 5.1 I could create a widgets folder under app/ and on the same level as stores, models, views, and controllers.

I understand EXTJS 6 uses app/ as a common place for stores, models, and controllers now.

I am attempting to move my extjs specific widget classes into classic/src/widget which is right next to my classic/src/views/main.

I am able to successfully build my application in classic, but when I run it in the browser I receive load errors that it cannot access my widgets. It can however access my mixins at classic/src/mixins and these classes are successful.

I am able to successfully render my application when I place my widgets under app/widgets but I understand I am not suppose to extend or reference any specific frameworks in the app directory.

Even though I am able to successfully render the application in classic mode, with widgets being in app/, the modern build will fail and throw unknown definition exceptions because modern is well, not extjs but touch.

Any thoughts on this?

Thank you

dongryphon
24 Apr 2015, 10:16 AM
Just to confirm, you are wanting to convert the application into a Universal App correct? The separation into classic and modern folders is not necessary otherwise...

heljo05
24 Apr 2015, 10:21 AM
We are considering using both frameworks in one application project. We would want a modern/src/widgets as well for Sencha Touch Components.

Right now we're investigating a proof of concepts doing this.

I was starting small with the extjs (classic/src/widgets), but had trouble getting those to work which prompted the support and questions.

dongryphon
24 Apr 2015, 11:37 AM
Can you post a snippet of one of the widgets you are wanting to share?

heljo05
24 Apr 2015, 12:09 PM
Yes,

below I can place this under app/widget folder I created and build classic. However this is a extjs specific component.

When I drop it into classic/src/widget it will compile, but I get Ext.Loader errors

GET file:///Users/heljo05mac/Desktop/ca_poc_sandbox/app/widget/DataViewMenu.js?_dc=20150424160400 net::ERR_FILE_NOT_FOUND
ext-all-rtl-debug.js?_dc=20150424160400:8472 [E]

[Ext.Loader] Some requested files failed to load.

I have attempted to 'require' my 'ca.widget.DataViewMenu' in app.js, application.js, and my classic/src/view/main.js but no luck.

I have attempted moving my widget folder from classic/src to classic/src/views/widget


Ext.define('ca.widget.DataViewMenu',{
extend: 'Ext.toolbar.Toolbar',
ui:'DataTaskMenu',
defaults: {
frame:false,
width:25,
iconCls: null,
handler: function(b,e) {this.up().buttonHandler(b,e)}
},
//http://fortawesome.github.io/Font-Awesome/cheatsheet/
items: [
{
glyph: '[email protected]',
cls:'sample-icon'
},
{
glyph: '[email protected]',
cls:'sample-dark-icon',
handler:function(b){
var record = b.up().record;
Ext.create('Ext.window.Window', {
title: 'Task',
height: 200,
width: 400,
layout: 'fit',
items: [{
xtype:'container',
html:record.data.caption,
id:'htmlContainer',
height:400,
style:'margin-left:10px;padding-top:5px',
listeners:{
afterrender:function(panel){
panel.getEl().on({
'dblclick' : function(){
panel.hide();
Ext.getCmp('htmlEditorContainer').show();
}

});
}
}
},{
xtype:'container',
hidden:true,
id:'htmlEditorContainer',
layout:'vbox',
items:[{
xtype:'htmleditor',
height:350,
flex:1,
id:'htmlEditor',
value:record.data.caption,
width:'100%'
},{
xtype:'button',
height:'50px',
style:'margin-bottom:5px;margin-left:5px;margin-right:5px',
flex:.2,
width:'100%',
text:'Update',
handler:function(){
var updatedValue = Ext.getCmp('htmlEditor').getValue();
record.set('caption', updatedValue);
Ext.getCmp('htmlContainer').setHtml(updatedValue);
Ext.getCmp('htmlEditorContainer').hide();
Ext.getCmp('htmlContainer').show();
Ext.getCmp('gridKanbanMain').renderLanes();
}
}]
}]
}).show();
}
},
// add a vertical separator bar between toolbar items
// '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
{
glyph: '[email protected]',
cls:'sample-dark-icon'
},
//{ xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
{
glyph: '[email protected]',
cls:'sample-dark-icon',
handler:function(b){
var record = b.up().record;
//console.log(b.up());
b.up().add({
xtype:'textfield',
enableKeyEvents :true,
width:'120px',
value:record.data.caption,
listeners:{
keypress:function(textfield, event, options){
//Capturing key events, specifically looking for the ENTER key.
if(event.getKey() == event.ENTER) {
//Obtain a textfield value
var newValue = textfield.getValue();
//set dataview record caption to something new
record.set('caption', newValue);
//Rerender Lanes and Items
Ext.getCmp('gridKanbanMain').renderLanes();
//hid e textfield
textfield.hide();
//enable button
b.setDisabled(false);
}
}
}
});
//disable button
b.setDisabled(true);
}
},
],
/**
* Handles or performs an action on the default button click.
* @param {Object} button
* @param event
* @private
*/
buttonHandler: function(b, e) {
e.stopEvent();
var record = b.up().record;
alert("Do something here: " + record.data.caption);
},
/**
* Be nice and cleanup anything you added
* @private
*/
destroy: function() {
//we are adding the record when we attach this toolbar to the data item
this.record = undefined;
this.callParent();
}
});

mitchellsimoens
29 Apr 2015, 11:14 AM
I find it necessary to run "sencha app watch classic" or "sencha app watch modern" to get it to build the bootstrap properly when you add/remove/move files around. Have you run it to rebuild the bootsrap info?

heljo05
29 Apr 2015, 11:19 AM
I had been rebuilding it with "sencha app build" after every new extended component, or update to my sass/fashion.

mitchellsimoens
29 Apr 2015, 11:55 AM
Can you try the app watch command? I've had it happen where an app build didn't work but app watch did.

heljo05
30 Apr 2015, 7:31 AM
The app watch will process the change (moving widgets from app/ into classic/src/), but when the application is reloaded, I yield the same errors in the console. These files are being required in my classic/src/view/main.js file. GET file:///Users/heljo05mac/Desktop/ca_poc_sandbox/app/widget/DataViewMenu.js?_dc=20150430112520 net::ERR_FILE_NOT_FOUNDand[E] [Ext.Loader] Some requested files failed to load.

StuartAshworth
5 May 2015, 5:02 AM
I have also had problems with the bootstrap files not being regenerated correctly and so the loader not finding the right files.

I also had issues with Chrome heavily caching things and it not loading the latest, you could try opening in a different browser or in incognito. Worth a try... :)

norbi24
10 Nov 2015, 2:16 AM
I'have just run across similar issue with ExtJs6.0.1 and cmd 6.0.2.14: have removed a couple of unused js files (including removing them from required directives) but after having built the app with
sencha build app classic production
two of my views were attemptd to be loaded from app/view/... instead of classic/src/view ...

Then have spent an hour reseaching it an fortunately found this thread ... after having executed
sencha app classic classic
everything work fine again ...

Seems to be a bug in cmd, right ?
Hmm not that critical but one can asily spend hours with this ...

Thanks, Norbert

Zdeno
10 Nov 2015, 5:50 AM
My recomendation - when you change anything (add/remove files) and use both toolkits, run sencha app refresh It will mostly solve all problems. I have had missing dependencies in modern toolkit, classic was fine but application loaded store from classic instead of app branch. After refresh without any errors everything works fine. One big plus - refresh is much faster than watch if you didnt change any sass.

norbi24
18 Nov 2015, 8:30 AM
Hi Zdeno,

Thanks for you help, but the refresh didn't solve my problem. I have an open ticket at Sencha
and hope they will help to clarify the problem

Best, Norbert