Latest Ext JS 7.8 is now available. Learn more

Top Support Tips: August 2013

August 14, 2013 186 Views
Show

Ready, Aim, Sass

Let’s say you have built your application, but your SCSS has changed. There is no need to sit through the entire build process again. Instead, why not target the exact part of the build that you need?

All you have to do is execute the following command.

sencha ant sass
	

This will make your build process begin with compiling your Sass instead of making you recompile other parts of your application that may not need attention. You can find a full set of target points with this command.

sencha ant .help
	

NOTE: Your application must be built before targeting specific points in the build process.

For more information about Ant integration, you can check out our docs:
http://docs.sencha.com/extjs/4.2.1/#!/guide/command_ant


Getting the Best Layout When Using Ext.Img

Co-author: Seth Lemmons

Oftentimes, users need to use a layout containing Ext.Img instances. The Image’s resources will load after the Ext JS layout of the parent container has run. If a specific height/width is not passed into the component’s configuration, the Image will render after the image has been laid out with the image’s actual dimensions being considered.

To ensure proper layout, it is recommended that users provide a height and width for all Image configs.

That said, applications may not always “know” the image dimensions and therefore, they must be determined after the image resource is loaded. To accommodate these instances, you can extend Ext.Img and make further use of the onRender method. For instance, you can have the Image’s element (Image.getEl()) listen for the ‘load’ event. Then, onLoad, check for the Image’s ownerCt property. If it exists, do Image.ownerCt.updateLayout(). This will force the parent container to recalculate the layout for the child items using the image’s actual dimensions.

Please note: this is still extra computation and should only be considered when an Image’s explicit height and width are unknown.

EXAMPLE:
Ext.define(‘MyApp.view.MyImage’, {
extend: ‘Ext.Img’,
alias: ‘widget.myimage’,
onRender: function () {
var me = this;
me.mon(me.getEl(), ‘load’, me.onImgLoad, me);
me.callParent(arguments);
},
onImgLoad: function () {
var me = this,
owner = this.ownerCt;
if (owner && (!me.height || !me.width)) {
owner.updateLayout();
}
}
});

var testImage = Ext.widget(‘myimage’, {
src: ‘https://www.sencha.com/img/sencha-large.png’,
// PROVIDE THE SOURCE IMAGE DIMENSIONS TO AVOID UNNECESSARY LAYOUTS WHICH CAN AFFECT PERFORMANCE
// height: 140, width: 372
});

Ext.widget(‘toolbar’, {
renderTo: document.body,
items: [testImage, {
text: ‘Button’
}] });

For more information about Ext.Img, please see our docs here:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Img.


Setting the Best Build Path in Sencha Touch

The Sencha Touch default build location may not always be ideal for every user’s dev environment. Sencha Cmd currently looks for a build destination in multiple locations so changing from the default build location isn’t always simple. That said, config options passed in via command line always win out over file settings.

To modify your Sencha Touch build location, simply add the build location to your properties at build time like this:

sencha config -prop args.destination=/path/to/build/dir then app build
	

For more information about build options, please check out our docs here:
http://docs.sencha.com/touch/2.2.1/#!/guide/command_advanced.

<!--

coming soon

Something Awesome Is

COMING SOON!
-->

<!--

[gravityform id="31" title="true" description="true" field_values="order_type=other"]
-->