使用Sencha Architect 2快速搞定Web App的UI

Ext JS是啥
首先簡單介紹一下Ext JS好了。不知道大家有沒有用過miroko?他是N年前我跟水利系室友非常愛用的免費服務,可以幫你掛BT並存到他所提供的網路硬碟空間內,對學術網路頻寬超級大,一秒可以衝到5~10Mb。(但是自從開始收費就跟它再會了) 它那種淡藍色UI,就是使用當時剛推出的Ext JS 1.0刻的。還是沒啥畫面嗎?這裡有真相

進入正題前,先看看官方提供的範例長怎樣吧!

feed1
圖:官方的範例之一:Feed Viewer,阿就藍藍的,非常的『2007』

簡而言之,Ext JS是Sencha公司推出的一個純JS的Web前端框架,提供一般Web App會用到的UI元件(按鈕、表格、Tab…)讓你實作出想要的user flow;且便於繼承擴充,定義出自己客製的元件;另外也提供許多好用的JS utility及Ajax Data Source支援,跟後端CRUD做完美的配合。在外觀上,預設主題是簡單但有點過時的淡藍色,不過他的主題是以SASS/Compass實作,因此只要找對美工,也是可以盡情揮灑的。目前它大多應用於企業端的內部Web (更多…)

10 款强大的JavaScript图表图形插件推荐

网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器和精密的计算使呈现实时数据变得容易,而且各种向量绘图技术像VML、SVG和Canvas的发展也使之成为可能。

本文推荐10款强大的绘制图表图形的JavaScript插件。其中一些插件需要主流浏览器的支持,而另外一些经过整合后,也能在不同的平台和老版本的浏览器上工作。有些工具是独立的框架,大部分支持常规的功能:条形图、线形图、饼形图,有的还可以生成更复杂的图表:关联图、维恩图、热区图、Newick树图、二维散点图、二维气泡图、三维散点图。

1. Humble Finance

这是一个非常好用的HTML5数据可视化工具,与Flash工具颇为相似。基于JavaScript,利用了Prototype 和 Flotr 库,可用于显示两组实时二维数据。

 

 

 

 

 

2. (更多…)

10 Awesome Javascript Plugins For Plotting Charts and Graphs

A plethora of amazing free Javascript plugins for plotting charts and graphs are now present online. Many good charting libraries are available. The rapid increase in the availability of this kind of plugins is because of the fact that people are no longer dependant on Flash. Modern browsers and sophisticated computing has made it easy to render live data. Advancement in various vector drawing technologies (更多…)

前端开发利器-WebStorm

最近同事推荐了一一款前端开发工具webstorm,使用了一下,便深深被吸引住了,抛弃以前一直使用的editplus,改用webstorm。花费一下午时间简单翻译了下官方文档上的特性说明。

HTML/HTML5/CSS

1.支持标签,自动闭合标签,数据源提示(如下图),id检测

wps_clip_image-20755

2.支持html5标签

3.代码检测功能

wps_clip_image-10511

4.代码优化提示功能

wps_clip_image-28323

5.zen 编码风格 例如输入div.feature>h4+p 再按tab建就会自动生成下面代码

6.显示当前元素的样式 点击右键选择下列菜单 效果如下

wps_clip_image-8448

wps_clip_image-32139

JavaScript

1.代码提示功能

wps_clip_image-22072

2.代码本地化及查找功能,以及高亮显示相关使用地方

wps_clip_image-26038

3.联动修改 例如tabs.js里定义了Downtabs 用户可以通过右键refactors来执行相应操作,重命名、移动、拷贝、安全删除、扩展类、直接引入代码(inline 不知道怎么表达) 如下图效果:

wps_clip_image-32093

wps_clip_image-27637

此时在extract中选择refactor->inline会生成如下代码:

wps_clip_image-10166

4.javascript调试功能在火狐中

5.支持框架jquery、yui、prototype、dojo、mootools、qooxdoo、bindows

还有很多很多的优点,例如代码格式化、体积小、自动保存、编辑后浏览器浏览缺点,目前发现的就一点不太好,自动生成idea文件夹,影响svn版本号

6.常用的webstorm快捷键

IntelliJ-Idea (更多…)

15 Awesome Free JavaScript Charts

Plotting your data can serve as a replacement to tabular data, and is also a great way to add practical graphics to your web page or application. There are many ways you can plot data, but here I have included 15 Awesome Free JavaScript Charts In Your Sites/Blog Pages which serves as a easy Charting solution. Hope you like it.

RGraph: HTML5 & Javascript charts for your website

rgraph-chart

RGraph is a charts (更多…)