PDA

View Full Version : Very simple question here



117r
20 Aug 2012, 12:15 AM
Hey there people! I'm a newbie to Extjs (4) and programming in general, and wanted to use an extension. The extension in question is window edge snapping (http://extraordinarythoughts.com/2011/08/17/extjs-snapping-windows/). Just wondering how I would use it?

It would be fantastic if someone could just tell be where to paste the code given, where/how to refer to it in the application's main file, and whether I need to do anything to my HTML index file. Sorry for the very simple questions, but any response would be great!

Thanks very much.

Farish
20 Aug 2012, 12:27 AM
you can copy the file to your extjs\examples\ux\ directory. Then use the following in your JS:


Ext.Loader.setConfig({enabled: true, disableCaching: false, paths: { 'Ext.ux': 'extjs/examples/ux/' }}); // this is the path where it will look for the ux

and


Ext.require([
// your other requires here
'Ext.ux.SnapWindows' // Ext.ux refers to the path set in the loader config above.
]);

117r
21 Aug 2012, 6:26 AM
you can copy the file to your extjs\examples\ux\ directory. Then use the following in your JS:


Ext.Loader.setConfig({enabled: true, disableCaching: false, paths: { 'Ext.ux': 'extjs/examples/ux/' }}); // this is the path where it will look for the ux

and


Ext.require([
// your other requires here
'Ext.ux.SnapWindows' // Ext.ux refers to the path set in the loader config above.
]);


Thanks very much for your help, but I'm still a little stuck. If I just show you what I've got in a very simple example it would be fantastic if you could point out any errors with what I've done.

Here is the HTML file:



<html>

<head>

<title>Title</title>

<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">

<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>

<script type="text/javascript" src="Test.js"></script>

</head>

<body>
</body>

</html>


And here is the javascript main file:



Ext.Loader.setConfig({enabled: true, disableCaching: false, paths: { 'Ext.ux': 'ext-4.0/examples/ux/' }});

Ext.require(
'Ext.ux.SnapWindows'
);

Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400
}).show();
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400
}).show();
});


The page works as I want it to, producing two windows, it's just that the extension doesn't seem to work - the windows don't snap at all anywhere. I've put the extension file in the correct directory (ext-4.0/examples/ux) and named it correctly etc. If you could point out any obvious errors that would be fantastic! Thanks so much!!