Sublime Text 2手工破解教程

2012 年 8 月 14 日2012 年 10 月 31 日 by Orange

目前最新版本的Sublime Text2破解方法：将sublime_text.exe复制一份改名为sublime_text_cracked.exe，~~用sublime text2打开这个sublime_text_cracked文件~~（新版sublime text貌似无法二进制写入，导致保存后无法识别为有效win32应用程序）用支持二进制写入的编辑器来改如WinHex，EMEditor，搜索3342 3032 （很多教程说搜索3342其实是错的，那要得不到准确的结果，会找到很多个。正确的方法应该是搜索33423032），改为3242 3032保存，打开sublime_text_cracked文件，在help菜单里enter license，把下面注册码贴进去，包括begin和end那两行，完。

测试环境：sublime text2 32bit在win7 ultimate 64bit sp1，xp professional 32bit sp2，windows server 2003 32bit。

linux和mac下的sublime text破解过程与windows下的同理。推荐使用0xED来编辑文件。路径位 应用程序->Sublime Text 2->MaxOS->Sublime Text 2

—–BEGIN LICENSE—–
hiwanz
Unlimited User License
EA7E-26838
5B320641E6E11F5C6E16553C438A6839
72BA70FE439203367920D70E7DEB0E92
436D756177BBE49EFC9FBBB3420DB9D3
6AA8307E845B6AB8AF99D81734EEA961
02402C853F1FFF9854D94799D1317F37
1DAB52730F6CADDE701BF3BE03C34EF2
85E053D2B5E16502F4B009DE413591DE
0840D6E2CBF0A3049E2FAD940A53FF67
—–END LICENSE—–

鉴于很多朋友修改失败，我将我改好的文件传上来给大家，安装完用下面的压缩包里的文件解压覆盖原文件后用上面的序列号注册即可。如果你觉得这个编辑器不错，人家也要生存要发展，可以支持下正版。

下载Sublime Text 2.0.1 32bit版本已修改的文件：sublime_text cracked file

下面是目前[2012-06-27]最新的Sublime Text 2.0[2210]版本成功注册的截图

Sublime Text 2注册机下载和纯手工破解教程

2012 年 8 月 14 日2012 年 10 月 31 日 by Orange

豆瓣的hzlzh之前发过一篇帖子『组织团购Sublime Text2』但是因为作者不同意价格团购活动取消，59刀也确实不是一个小数目，不过随便放狗一搜就发现有人已经发了Sublime Text 2.x版本的注册机和手工注册的工具和教程出来。

Sublime Text确实很好用，但作者并不重视中国用户，而且价钱也确实稍贵。简单破解一下只是屏蔽了弹出要求注册的提示而已。如果作者肯降价&&能原生支持gb2312编码文件俺还是很想入一套的。

直接的注册机下载地址：CSDN下载

纯手工注册教程:Sublime Text 2手工破解教程

注册前（备份文件）：

注册后：

Web设计者和开发者必备的27个Chrome插件

2012 年 8 月 14 日2012 年 10 月 31 日 by Orange

自Chrome推出以来，由于其极快的启动速度和页面加载速度、日益剧增的强大的插件以及简洁清新的界面，越来越受用户及开发者的欢迎，其市场占有率也在不断攀升，人们也相信，其取代IE、Firefox的地位也只是时间问题。

在Chrome浏览器中，用户可以轻松添加各式各样的插件来提高日常工作的效率，这里我们为设计者和开发者精选了27款实用的Chrome插件，希望能够对您有所帮助。

1. AppJump 应用程序发起者和管理者

当您添加了以上插件后，您肯定会需要工具管理您的插件。 AppJump是一个Chrome插件，让您能从工具栏下拉菜单上快速找到并启动您的应用程序和其他插件。AppJump的一个很酷的功能是能将应用程序和插件组织进入不同组。例如，您可以轻松将个人插件同工作插件隔开，以进行更有效的时间管理。

2. AwesomeScreenshot（剽悍快照）

AwesomeScreenshot顾名思义，可以对整个和局部页面快照，在截图后可以使用圆圈或下划线突出相关部分，也可以模糊掉不相关的内容，并做出批注。您可以保存图片到本地或上传和接受图片链接进行共享。

3. Aviary ScreenCapture(Aviary屏幕采集)

在介绍AwesomeScreenshot后，我们再介绍一个截图工具，也许您会感觉到奇怪为什么我们要介绍两个截图工具，这是由于Awesome Screenshot有一个缺点，它需要访问您电脑和浏览器的历史记录上的所有数据，对于用户来说这无疑是在侵犯他们的隐私权，而Aviary就无需获取用户个人信息。

4. Chrome Sniffer（Chrome嗅探器）

Chrome Sniffer可让您检查任何网站使用的框架。它可以定位并显示在网站上的任何已知的内容管理系统（CMS）或JavaScript库。此插件功能对于浏览那些令人兴奋的非人力所及的网站无疑是伟大的。目前，Chrome Sniffer可以检测超过100框架。

5. Cloud Save（云保存）

面临从本地操作到在云上工作的巨大转变。作为设计者和开发者，您习惯于在网络上工作，但您是否在线保存重要的文件？如果您的借口是，这种保存方式不怎么方便，那您也许需要看一下什么是云储存。它允许您保存支持云储存的任何网站的文件，如：Amazon、Dropbox和Flickr。

6. Code Cola

CodeCola允许用户编辑网站内的个别网页，它允许您点击网页的一个区域，并自动编辑CSS。

7. Corporate Ipsum

CorporateIpsum对于标准Lorem Ipsum文本补白是一个有趣的替代插件。借助此插件，您可以用“corporate”speak（企业的公关说辞）和流行语补白您的网站。Corporate Ipsum的一个例子是，“胜任的和目标企业的数据，并带有多功能的构想。” 该插件基于流行的同名Mac产品。

8. Diigo 书签/存档/突出显示和即时贴

Diigo是互联网信息组和其他事物的简称。它是一个在线的研究工具，使用户能够管理信息。以多种颜色突出显示网页，即时贴在您的社交网络的交流页面，并创建组以共享您的研究。

9. Drag2up

Drag2up是一个易于使用的文件附件系统。不是通过点击各种窗口，而只需从您的电脑拖动您想要上传的文件到上传框中就可以了，您也可以将文件上传到各种托管网站，包括Flickr、ImageShack、Twitpic和Box.net，此插件是必须下载的功能插件之一。

10. Eye Dropper

您不时会遇到一些完美的绿色阴影，而且您想把它融入到您的页面设计当中，那么Eye Dropper插件就能帮助您找到确切的阴影，而且它能跟踪您的颜色历史记录。

11. Firebug Lite

Firebug是个伟大的工具，使人们难以从Firefox过渡，从而放在一旁。幸运的是，Chrome有一个叫Firebug的插件，提供了一项类似的功能。Firebug Lite同Chrome开发工具一同工作，使开发人员能够检查和编辑HTML和DOM元素。它还允许您轻松地调试。Firebug Lite实际上是一个JavaScript文件，一旦插入网页，就如同原来的Firebug。

12. Greplin

Greplin允许在您的私人数据中进行搜索。使用此插件来查找您在不同网站中提交的信息，如Twitter、Facebook甚至是Gmail。它给数据添加索引使数据易于搜索，不需通过您的历史记录来搜索，所以您可以方便地调用Greplin中的数据。

13. HTML Instant

HTMLInstant是一个实时的HTML工具。它具有画面分割功能。当您在分隔屏幕的左边键入代码时，您可以在右边实时查看效果。HTML Instant不但支持HTML，而且它也支持CSS和JavaScript。您还可以从Image Shack、Photobucket或随机的托管图片的网站上传图片。此HTML编辑器对于新手来说还具有易使用的特点。

14. IE Tab

IE Tab插件允许您从一个模拟的IE中查看网页，同时仍使用Chrome浏览器，由于 IE仍然是大部分网民首选的浏览器，目前仍有一些网站在IE下运行的最好，甚至只支持IE。此tab允许您使用InternetExplorer而又无需牺牲你的尊严。首先，IE Tab仅适用于Windows。这是因为它使用了Windows的内置Internet Explorer渲染引擎。出于这个原因，只能怪Mac用户运气不好。

15. Image Properties Context Menu（图片属性环境菜单）

图片属性环境菜单是一个有用的Chrome插件，它提供与所选图片相关的一切信息，用户可以找到图片的位置和源图片，它还显示图片的尺寸和文件大小。这是一个简单而有效的插件，不知什么原因该功能没有包含在Chrome浏览器中。

16. MeasureIt!

MeasureIt是设计者的一把尺子，您可以用它来量度页面上任意元素的尺寸，只要点击一下该插件，并且拖出尺子就可以快速而且方便地度量尺寸。

17. Microstock Photo Power Search Tool（Microstock图片强力搜索工具）

一个伟大的网页设计师和一个好的网页设计师的区别在于是否知道去哪里获取称心的图片。任何设计师都知道，要寻找合适的图片是设计中最耗时的部分之一，尤其是如果您在几个地方寻找图片资源。此插件就能够帮助您在5个顶级图片库轻松搜索到图片，包括Dreamstime、Fotolia及 Shutterstock。

18. Palette for Chrome（Chrome调色板）

Chrome调色板十分实用，您只需右键点击任何图片。此插件可以创建一个16、24或32调色板。另外，您还可以创建自定义调色板，选择您喜欢的图片然后获取其中的颜色添加到您页面设计中。

19. Pendule

强大的Pendule插件结合了几个在此列表中的插件的功能。Pendule允许您查看和更改JavaScript和CSS。您还可以查看特定的图片信息，或完全隐藏起来。这是一个强大的开发工具，包括颜色选择器，HTML和CSS验证器和链接检查。

20. PlainClothes

PlainClothes是一个有趣的而且有用的插件，您可以通过它查看一个网站的概要。有时更容易看到设计中的错误或当它变成黑白时分析它的工作原理，PlainClothes允许您拆开一个网页到一个文本颜色、一个背景颜色和一个链接颜色中。链接被下划线，文字是默认的。其实，对于添加可达性到您的网页设计中，PlainClothes非常实用。

21. Resolution Test（解决方案测试）

您可以通过更改浏览器的大小来测试您网页的显示效果。Resolution Test可以测试您网页在不同分辨率下的显示效果，而且您可以查看当前测试分辨率。

22. Search by Image（按图片搜索）

Searchby Image是我最喜欢的Chrome插件之一。此插件可以在不同的网站上搜索您指定的图片。借助此插件也可以搜索类似图片。只需右击利图片，并选择“通过Google搜索该图片”您将查找到包含该图片或匹配该图片的网页。

23. Session Manager

SessionManager 可以保存当前打开的标签，特别对多次打开的同一网页很有用，此插件可以把不同的网站进行分类保存。例如，将您的所有社交网站捆绑在一起，使您可以快速访问他们，而无需单独打开每个站点。关闭他们也一样快，并保证您的标签已保存。

24. TabJump

类似于Session Manager ，TabJump可是青出于蓝胜于蓝。它不仅管理您的标签，此插件也可以锁定标签，防止您意外关闭一个重要的标签。如果您错误关闭一个标签，TabJump允许您重新打开它，但要记住，该插件无法还原历史记录。

25. TooManyTabs

因为永远不会有一个完美的插件来管理浏览器的标签，TooManyTabs是另一个必须具备的插件，其显示了所有已打开的标签缩略图。当您打开了许多标签时，可以不再需要阅读标签标题，因为它提供了一个直观的视图效果。

26. Web Developer（Web开发者）

WebDeveloper是另一个全面的开发者工具。它的开发者同时也开发很多受欢迎的Firefox插件。有了此插件，用户可以查看和编辑CSS、显示图片文件的大小和清除会话cookie。

27. WhatFont

对于大多数的网页设计师，字体可算是头等大事。您是否经历过，在一个随机的网站上找到了完美的字体，然后只有搜索无尽的代码来寻找答案吗？如果您想事情变得简单，可以安装这种字体寻找插件。只需将鼠标悬停在一个文本上，并找到使用的字体。此插件不仅会告诉您字体的名称，它也提供字体大小和颜色。

PS：杰奎琳托马斯是一位屡获殊荣的作家和网页设计顾问，您可以在她的网站上找到她，并关注她的Twitter。

您有任何不在此列的喜欢的插件吗？请在评论中与我们分享。

Nginx的WordPress中文rewrite规则

2012 年 8 月 11 日2012 年 8 月 11 日 by Orange

 location / {
            root   /www;
            index  index.php index.html index.htm;
            if (-f $request_filename/index.html){
                    rewrite (.*) $1/index.html break;
            }
            if (-f $request_filename/index.php){
                    rewrite (.*) $1/index.php;
            }
            if (!-f $request_filename){
                    rewrite (.*) /index.php;
            }
        }

完美支持中文，亲测成功。添加在Location｛｝中间。

启用 Mac OS X 中的 Apache 和 PHP

2012 年 8 月 10 日2012 年 10 月 31 日 by Orange

Mac OS X 是自带 Apache 和 PHP 的，但默认情况下并没有开启，此文说明如何启用这两个服务，环境基于 Mac OS X 10.6 Snow Leopard。

启动 Apache

启动 Apache 有两种方法，一是图形化界面，而是命令行界面。

图形化的方法是打开「系统偏好设置」中「共享」的「Web 共享」。

Mac OS X 启用「Web 共享」

命令行方法是打开终端，Apache 服务需要 root 权限才能启动，所以执行以下命令：
sudo apachectl start

启用 PHP

修改 Apache 的配置文件，路径是 /etc/apache2/httpd.conf，把关于 PHP 的一行的注释（#）去掉：
LoadModule php5_module libexec/apache2/libphp5.so
然后重启 Apache 即可：
sudo apachectl restart

现在访问本机的网站试试：http://localhost/
如果成功会出现下面的成功页面。

Mac OS X 启动 Apache 成功

默认的网站根目录是 /Library/WebServer/Documents，在此目录下放一个 PHP 文件（如此文的info.php）来测试一下 PHP，文件内容简单如下即可：

访问此页面 http://localhost/info.php，测试结果如下：

Mac OS X phpinfo

成功了。笔者使用的是 Mac OS X 10.6.3，从上面的页面可以看出系统自带的 PHP 版本是 5.3.1（2009-11-19），虽然不是最新的 5.3.2（2010-03-04），但也不算旧了。

另外每个系统中的用户都有自己的站点，启动「Web 共享」即 Apache 之后就可以访问了，每个用户的站点的 URL 是 http://localhost/~username/。如果系统的防火墙设置没有阻止 Web 共享的话，网络用户就可以通过类似下面的 URL 来访问各个站点了：

http://192.168.0.168/~username/

其中 192.168.0.168 是主机在网络中的 IP 地址，username 是系统中的用户名，如下图所示：

Mac OS X 用户站点

3D 标签云 wp-cumulus 中文显示完美解决办法

2012 年 8 月 9 日2012 年 10 月 31 日 by Orange

wp-cumulus 是我用的为数不多的前台插件。效果非常酷。效果见右侧，不过由于 Flash 本身大小限制的问题，不能嵌入全部中文字库，所以 3D 标签云中不能显示中文。常见的解决方案就是嵌入常用中文字体，这样虽然解决了中文显示的问题，但是导出后的 swf 文件的大小不仅增加了，而且后来增加的文字还是不能显示。本文提供一种不用嵌入字符的解决办法，使导出的 swf 文件大小在 8KB 左右，而且不会出现后来的文字不能显示，可以成为一种完美的解决办法

解决方法：

1.在http://wordpress.org/extend/plugins/wp-cumulus/download/下载 wp-cumulus 源代码（选择 Development Version，开发版本附带 fla 源文件）

2.打开 tagcloud.fla 选择 tag 文本框

在右侧属性栏中，点击“嵌入”

在弹出的对话框中，清除所有嵌入的文本，如图

用记事本打开comroytanckwpcumulus目录中的Tag.as文件，找到_tf.embedFonts = true;一行，加双斜杠注释掉：//_tf.embedFonts = true;，同时可以修改 format.font 为你自己喜欢的字体（常用字体，确保浏览者电脑中中安装这种字体），我的字体 format.font = “微软雅黑,Verdana, Geneva, Tahoma, Arial, sans-serif”;修改字体形式 format.bold = false;，Ctrl + 回车，生成 swf 文件就可以了，

3.把生成的 tagcloud.swf 文件上传到服务器 wordpress 插件目录中（*/wp-content/plugins/wp-cumulus/），覆盖同名文件即可

PS:

如果你没有安装 Flash 或者不想这么麻烦，你也可以直接下载我的文件：http://maoxian.de/wp-content/plugins/wp-cumulus/tagcloud.swf（右键另存为，不要直接打开）

Chrome 多用户分别建快捷方式

2012 年 7 月 25 日 by Orange

Chrome 从今年年初开始在 Dev 版支持多帐号, 当时用的很爽. 最近 Dev 版解析 .js 老出错, 导致无法正常上人人和看视频, 严重影响工作和娱乐, 响应大家号召改回 stable, 结果发现多帐号是支持的, 但是怎么也找不到如何建特定帐号的快捷方式, 网络上搜的方法都只对老版本的 dev 分支有效.

今天找了另一台机器, 上面有多用户且分开建了快捷方式的 Chrome Dev, 看了下快捷方式, 把快捷方式的目标改为下面这样就行了 (红色是要添加的)

C:\Users\snoopy\AppData\Local\Google\Chrome\Application\chrome.exe --profile-directory="Default"
C:\Users\snoopy\AppData\Local\Google\Chrome\Application\chrome.exe --profile-directory="Profile 1"

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

2012 年 7 月 17 日2012 年 10 月 31 日 by Orange

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

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

圖：官方的範例之一：Feed Viewer，阿就藍藍的，非常的『2007』

簡而言之，Ext JS是Sencha公司推出的一個純JS的Web前端框架，提供一般Web App會用到的UI元件（按鈕、表格、Tab…）讓你實作出想要的user flow；且便於繼承擴充，定義出自己客製的元件；另外也提供許多好用的JS utility及Ajax Data Source支援，跟後端CRUD做完美的配合。在外觀上，預設主題是簡單但有點過時的淡藍色，不過他的主題是以SASS/Compass實作，因此只要找對美工，也是可以盡情揮灑的。目前它大多應用於企業端的內部Web Application based的資訊系統（至少敝公司將它視為UI標準之一orz，另外不知道為啥，在大陸跟日本的開發者社群似乎都相當發達）。我個人認為它的優點在於良好的繼承架構、便於快速開發及擴充，還有完整豐富的社群、官方支援及API（用商業化套件的好處就在於任何奇怪、無恥的問題只要PO個版就有解，瀏覽器相容等問題都不用自己去搞，也不會叫你RTFM）；但是相對的，跟jQuery+jQuery UI的方便性比起來，它的缺點是架構較為固定，很難去把它的架構翻掉自己重新設計；另外最重要的，它在某些情況可能要錢。

圖：Ext JS 4.1 提供的Nepune主題

授權
其實寫這篇文章真的有點掙扎，因為真的像是業配文orz。還是先來講講授權的部分：Ext Core是Ext JS的核心，提供類似於jQuery的DOM操作等功能，是免費的且使用MIT License；打個比方：Ext Core之於Ext JS，就如同jQuery之於jQuery UI。雖然Ext JS也算是開源的，但它的授權就比較複雜。如果也是用於open source開發，則適用GPLv3；如果是商業用途且將原始碼視為公司proprietary，則適用Sencha Commercial License；如果是要把它做成另外的商業化SDK（如Ext.NET），Sencha也提供OEM License。而今天要講的Sencha Architect，則是Sencha推出的架構設計工具，一套要價$399鎂，但提供免費試用。

開始使用Sencha Architect做第一個Ext JS的UI
進入正題，前幾天Sencha發表了最新的Sencha Architect 2 （梗在這，因為它以前叫Ext Designer，現在升級變Architect XD）。它是一個強大的東西，只要拉一拉、摳一摳，十分鐘就可以把UI刻好了。除了拉UI之外，它之所以會改名為Architect，是因為它可以直接在裡面寫code、做event handling、甚至定義MVC架構。（另外一大賣點是可以開發Sencha Touch當成手機App，但是本周主題是Web App，所以就不提這段XD）這篇文也不會涉獵到太深的架構部分，目標先設定在快速上手並做出一個會動的Web UI。話不多說，讓我們開始吧（羞）

下載並安裝
載點在此，試用前須註冊Sencha Forum的帳號。它本身是以QT及其內建Webkit寫成的跨平台程式，可以在Windows/MacOS/Linux上執行。將程式打開之後，可以看到一個很熟悉的WYSIWYG所見及所得編輯器：左邊是工具箱、中間是畫布、右上是階層圖、右下是一欄欄的屬性。

圖：Sencha Architect跑起來的樣子

開始拉UI
迫不及待要從左邊拉東西進來了吧？首先，身為一個web app，會需要的是一個viewport。它可以把整個網頁的畫面撐開，讓我們在裡面做layout。

圖：把整個Web App畫面撐開的東西是Viewport

繼續瘋狂拉東西進來之前，還是要先對Ext JS所提供的各種layout有基本的認識。這個Ext Layout Browser裡面有各種layout的DEMO及基本介紹。一般來說，我們常常在web app的最外面使用Border Layout，將畫面分成東南西北中發板幾塊（region）。
要設定這個viewport的layout類型，可以在右邊屬性中找到layout下拉選取，或是在畫布上的藍色齒輪跳出的快速設定popup中選取。接下來真的就可以從左邊亂拉元件了。要注意的是，若是在一個border layout的container裡面，它需要有一個region: ‘center’ （中央）的子元件；其他東西南北則不一定要有。拉完之後可能長這樣。

圖：Border Layout的示意圖，紅色框起來的地方套用了border layout

以下面的圖為例，我西邊放了一個Tree Panel，將它的collapsible（可收合）及split（邊緣分割線）屬性設為true；中間則放了一個包含三個tab的Tab Panel。在第一個Tab，我將它的layout設為absolute，這時候畫面上會出現格線方便我們直接拖拉調整子元件的位置。若要將表單欄位貼到最右邊，可以將anchor屬性設為100%。
在我們拉表單的時候，可以在畫布上的元件按右鍵使用duplicate功能快速複製；複製後可用transform將其轉為其他類別的元件（如：將combo box下拉選單欄位轉為date field日期欄位。它們都是繼承Ext.form.field.Base）。

看看內建的API文件
Sencha Architect的一大優點就是它本身整合了Ext的documentation，大幅減少了設計時翻文件的痛苦。如下圖，在左邊的工具箱中點每個元件後，下方都會出現簡單說明；另外，在屬性視窗中的每個屬性旁都有一個問號，滑鼠移上去也會秀出簡單說明。若是想看完整的document，也可以點連結直接跳到線上API去看。

圖：Sencha Architect中內建的documentation功能

看看很好很強大的線上API文件吧！
Ext的原始碼本身是以JS Doc形式做self-documentation的。Sencha也開發了一個工具叫JS Duck將原始碼直接變成像這樣的API網站。裡面可以看到它提供所有的功能，元件Class的繼承hierarchy，還有範例以及別人的評論。這裡面真的很值得探索！

事件處理
若是我想讓user按按鈕之後，將左邊的tree收起來，該怎麼做？（例子很爛請包涵XD）首先我們先將左邊的tree panel取一個ID叫myTreePanel。有了ID之後，在任何地方都可以使用Ext.getCmp(‘元件ID’)來取得該元件，並進行操作。（題外話，當然這不是唯一方法。若是熟悉CSS selector，也可以用類似jQuery的方法來取得元件，如query、up、down等等。這種寫法相當適合controller使用。）

圖：給咱們Tree panel一個ID

接下來，在button的屬性視窗中加入一個event handler如下圖。一個按鈕所有可能觸發的event全部在下拉選單列給我們看了！很直覺地，click應該就是我們要的（通常試試看就知道是不是我們要的了）。

圖：給button加一個click的event

然後就可以開始寫code了！這一行是利用剛剛設定的ID來拿到左邊的tree，並將它收合。

圖：將左邊的tree收合

簡單吧！到這邊已經可以lay出複雜且會動的UI了！

Data Model與Store
在企業的web application中，前端需要的資料大多從後端DB過來。只要是有『吃資料』的元件，都需指定一個store給它，裡面存有前端畫面需要的所有資料。在store裡面需定義該store所需要存取的欄位（可以直接在store的fields屬性中定義欄位，也可以指定一個定義好的Data Model給它。）。以combo box（下拉選單）為例，它通常需要兩個欄位：顯示文字與實際值。
依照與後端溝通的方式，Ext提供了各種不同的proxy供store使用。另外根據回傳的資料形式不同，也提供了不同的reader供proxy使用。像我最常用的應該是Ajax Proxy搭配Json Reader。舉例來說，若是我們要做一個性別的選單，而資料由後端某個URL傳回來的Json格式如下：

檢視原始檔複製到剪貼簿列印關於

{
“total”: 2,
“data”: [
{“gender”: “M”, “genderText”: “男性”},
{“gender”: “F”, “genderText”: “女性”}
]
}

則需在store新增兩個field：gender和genderText；在proxy的url打上該URL；在reader的root屬性設成”data”（請看上面的json，我們要的資料是在data裡面）。

我知道這又是個爛例子，因為性別其實hard-code就好了XD。下圖是hard-code的combo box store作法：建立一個Json Store，在field內加兩個欄位；在data裡面hard-code我們的資料；將proxy砍掉。

圖：Store裡的設定

Combo box部分，將store指向上面定義的MyJsonStore；將displayField跟valueField分別設成我們的顯示文字與實際值欄位名；將queryMode設成”local”（若設成remote，當user在combo box敲字篩選時，會在url後面加上?query=xxx然後去問後端，方便後端做篩選處理）。

圖：Combo box裡的設定

佈署到local並預覽
剛看到Sencha Architect畫面時，一定會想試試看preview跟deploy按鈕到底是在做啥。其實也沒啥，就是幫我們deploy到web server再開啟瀏覽器預覽。須先在settings設定路徑如下圖。另外建議將Ext JS Path改成4.1的http://extjs.cachefly.net/ext-4.1.0-gpl/。

圖：專案設定畫面

Application及MVC架構
雖然這超出本文涵蓋的主題，但還是稍微談一下好了。當Web App規模大到一定程度時，想必會開始思考如何組織程式碼，讓它可讀性變高，還有方便maintain、動態載入及效能等等架構面的問題。若是有看過backbone.js、require.js、knockout.js等工具的介紹文，應該會對現在流行的架構概念有所認識。其實Ext JS也有它自己類似AMD的機制；如果要做類似backbone的hash routing，也可以透過Ext.history（但它還是用hidden iframe囧要支援舊瀏覽器沒辦法）；最重要的，它的MVC架構設計也是相當優秀，值得另開專文深入討論之。若想瞭解，可以參考這篇官方介紹。看完之後，相信會迫不及待地從左邊工具箱拖出controller來玩玩看吧！

好文分享：
* Ext JS 4的Application/MVC架構概觀
* Deft JS: Loosely Coupled MVC through Dependency Injection – John Yanarella
下面這幾個archticture tool相關文章也非常值得看看，但跟Ext沒關係
* Backbone.js X RequireJS Quick Guide – 大澤木小鐵
* 介紹Knockout.js的MVVM：Understanding MVVM – A Guide For JavaScript Developers – Addy Osmani

整合後端開發
在瞭解他匯出的行為之後，就會發現其實很容易跟後端開發的專案進行整合。其中會遇到的一個問題就是他跑AMD動態載入JS Class時的路徑是否跟專案中的目錄架構是一樣的，這時候就要對Ext.application中的appFolder屬性做調整。我去年的一篇文章是以Java EE的Web project為例，將Ext Designer 1.2整合Eclipse進行開發。
好文分享：
* Node.js+mongodb+EditGrid範例

IE8效能問題
這年頭很多人都愛用Firefox或Chrome進行開發，但是很遺憾的，咱們user可沒那麼先進。更令人沮喪的是Ext JS 4.0至4.0.7版本在IE8以下都有嚴重的效能問題。Sencha的解釋如下：

Ext JS 4 features a brand new rendering pipeline that is significantly more structured and extensible than the rendering process in Ext JS 3. All Components now render the same way, and are driven by XTemplates. They also follow a common hook point regime, enabling the framework and developers to extend or hook into the render process for each Component.
While the new rendering architecture is a big step forward, it did create slow performance in some cases. In 4.0.1 and before the order of operations in the rendering process was not as efficient as it could have been, resulting in many more DOM updates than are actually needed. In 4.0.2 we have corrected this behavior, yielding significant render speed improvements.
We have already identified further optimizations to the rendering pipeline that will be incorporated into Ext JS 4.0.3 and beyond. Performance is very important to all of us and making the framework as fast as we know it can be will remain a top priority for the team.

因此這次公開的4.1版主要就是focus在解決在IE的效能問題，現在已經有改善許多。但是，在開發期間，良心建議您偶爾還是把IE開來跑跑看，免得像小弟當初一樣，發現時已經距引咎辭職(刪除線)上線的日子不遠矣！

在Linux下，SVN服务器的权限配置

2012 年 7 月 17 日 by Orange

言归正传，按照前面的教程装完1.5.5版以后，当svnadmin create /home/svn/yourproject创建仓库后，应该在仓库目录下的config目录有3个文件——authz、passwd、svnserve.conf。

下面对3个文件进行说明：

svnserve.conf是基础的配置，用于控制访问的权限将[general]前的注释与空格去掉，一定要去掉空格，否则到时客户端登录会出现”Section header must start in the first column的”的告警！亲身体会啊！！最后此文件内容至少包含以下内容：

[general]

anon-access = none

auth-access = write

password-db = passwd

authz-db = authz

其中，anon-access = none禁止匿名登录，auth-access = write为署名登录获得写权限，password-db = passwd指定用户配置文件，authz-db = authz指定权限配置文件

————————————————

passwd是用户配置文件，用于设置用户名以及密码

格式为：

[users]

<用户1> = <密码1>

<用户2> = <密码2>

其中用户名，密码不能为中文，至少我设中文登录时提示没有该用户

[users]是必须的。下面列出要访问svn的用户，每个用户一行。

示例：

[users]

alan = password

king = hello

这个里面的user表示当前test版本库的成员

——————————————————

authz是详细的用户授权文件

格式如下（以下内容转载，感谢原创）：

　　用户组格式：

[groups]

<用户组名> = <用户1>,<用户2>

　　其中，1个用户组可以包含1个或多个用户，用户间以逗号分隔。用户必须要在passwd文件里能找到,它是给那个里面的user赋权限.

　　版本库目录格式：

[/目录]

@<用户组名> = <权限>

<用户名> = <权限>

　　示例：

　　[groups]

　　admin = alan

　　[/]

　　@admin = rw

　　[/svn/p1/WebProject]

　　king = rw(表示king能够读写/svn/p1/WebProject目录下的所有信息)

　　[/svn/p1/web]

　　zp=r(表示zp能够读/svn/p1/web目录下的所有信息)

————————————

以下是自己的体会：

注意：@admin代表整个组，king 在这里只是一个用户

关于访问路径[/目录]，其完整格式[repos-name:path]或者[path],repos-name是版本库的名字

注意：在authz中如果要设定中文文件夹的路径,例如[/测试],请在linux在双击文件用默认记事本打开，然后另存为，注意将编码格式改为UNICODE UTF-8,否则在windows下用TortoiseSVN进行操作时，该中文路径的权限设置会有问题！此乃我的实际测试

当你用的中文svn客户端，并且又出现[璁よ瘉澶辫触]的错误不能够签入和签出，那么请检查authz的[path]权限等是否正确

Linux下关于subversion权限配置问题

2012 年 7 月 17 日 by Orange

我们在Linux下安装svn时，会发现这么一个问题，所有配置svn的过程自己都认为成功了，为什么一到客户端访问就会出现这样的提示呢：

Authorization failed

其实这个是权限配置的问题，说白了就是目录没配置对，并且你也没访问对。其实svn的配置不是很难，难的是你怎么用你清晰的思路去理解，以下说一下我是怎么进行配置的：

Subversion启动时候一定要注意应该启动哪个目录，这个细节将直接影响到你最后将给予目录权限的配置文件authz上面。

1、启动： svnserve –d –r /

这样的话在authz里就该：

[test:/] //可以访问test目录下所有文件(test是我在/根下建立的一个文件夹)

086php = rw //具有读写权限

? = r // 除了上面的用户，其他用户只有读的权限

客户端访问应该是这样:

IP test 例:svn://192.168.0.1/test

例如我想访问svn://192.168.0.1 下的所有目录，那么我们就得需要更新svn运行的目录，以及authz文件了。（test是我的仓库）

2、启动：svnserve –d –r /test

Authz文件内容:

[/]

086php = rw

这样你就可以直接访问svn://192.168.0.1目录下的所有文件，其实也就是我的仓库test下的所目录

3、如果你想访问test下的一个目录的话：

启动：svnserve –d –r /

Authz:

[test:/其他目录]

086php = rw

以后访问地址将：svn://192.168.0.1/目录

4、启动：svnserve –d –r /test

Authz:

[/其他目录即可，无需加test仓库名]

086php = r

访问地址变成了:

svn://192.168.0.1/其他目录

桔子小窝

小技巧

Sublime Text 2手工破解教程

Sublime Text 2注册机下载和纯手工破解教程

Web设计者和开发者必备的27个Chrome插件

Nginx的WordPress中文rewrite规则

启用 Mac OS X 中的 Apache 和 PHP

启动 Apache

启用 PHP

3D 标签云 wp-cumulus 中文显示完美解决办法

解决方法：

PS:

Chrome 多用户分别建快捷方式

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

在Linux下，SVN服务器的权限配置

Linux下关于subversion权限配置问题

2025 年 4 月
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30