Tag: sencha

ExtJS’s Grid Clipboard plugin is borked by design

I’ve been meaning to write this for nearly a year, but I held off hoping things would change with the next release. They didn’t, so I’m writing this: the Clipboard plugin for the Ext.grid.Panel class – which provides cut-and-paste support for the enhanced table widget – is borked by design. It does stupid things, and Sencha says it should do the stupid things. In this post I share what these things are, and how I’ve overriden the default behaviour to do something hopefully less stupid. Warning: this is a rant.

Continue reading “ExtJS’s Grid Clipboard plugin is borked by design”

Upgrading to ExtJS 6.2

Sencha recently announced the general availability of ExtJS 6.2. People who regularly read my posts (hi, to all three of you. 😉 will be aware that I’ve been working with the ExtJS library for a number of years now, while building a suite of apps of some not inconsiderable size1. It’s probably not the largest ExtJS app in the world, but it’s up there. And when you work on an application for a number of years, you’ll need to upgrade its framework from time to time.

Every time I’ve done this, the process has been a bit different. This time, it’s different in a good way – it was easy.

Continue reading “Upgrading to ExtJS 6.2”

ExtJS 5 and Gradle – Playing Together

Augmenting ExtJS with Gradle

ExtJS is pretty nice, overall, and it comes with a powerful build tool – Sencha Cmd.

Running builds with it can be tedious, because it doesn’t have any up-to-date checks – it constantly rebuilds stuff it doesn’t need. Oh, the time wasting!

As it turns out, Sencha Cmd is an Ant-based build tool. Which means we can create Gradle builds that augment it – given us support for such things as up-to-date checks.

Like this:

ant.importBuild 'build.xml'
def packages_dir = file('../packages')
clean {
doLast { delete 'bootstrap.js', 'bootstrap.css', 'bootstrap.json' }
}
refresh {
inputs.dir 'app'
inputs.file 'app.json'
packages_dir.listFiles().each() { package_dir -> inputs.dir new File(package_dir, 'src') }
outputs.file file('bootstrap.js')
outputs.file file('bootstrap.json')
}
js {
inputs.dir 'app'
packages_dir.listFiles().each() { package_dir -> inputs.dir new File(package_dir, 'src') }
outputs.file file("../build/${this.property('build.environment')}/${projectName}/app.js")
}
resources {
inputs.dir 'resources'
packages_dir.listFiles().each() { package_dir -> inputs.dir new File(package_dir, 'resources') }
outputs.file file("../build/${this.property('build.environment')}/${projectName}/resources")
}
sass {
inputs.dir 'sass'
packages_dir.listFiles().each() { package_dir -> inputs.dir new File(package_dir, 'sass') }
outputs.file file("../build/${this.property('build.environment')}/${projectName}/resources/${projectName}-all.css")
outputs.file file('bootstrap.css')
}
page {
// what are the inputs to page, I wonder?
// the outputs are the microloader.js and the index.html...
}
view raw build.gradle hosted with ❤ by GitHub
# the default Build Environment. Production is the default for Sencha Cmd.
# Use -Dbuild.environment on the command line to change, otherwise it doesn't get passed to the ant build properly
build.environment=production
# The project name. Should match what is in the app.json file
projectName=MyApp
view raw gradle.properties hosted with ❤ by GitHub

Share and Enjoy!