Dev Story..


 또는 

<a href="#none" title="안녕하세요.&#10;C.m.A 입니다.">마우스를 올려보세요</a>

http://mobicon.tistory.com/275

&nbsp;        띄워쓰기(space)

&amp;        &

&gt;           <

&lt;             >

&quot;         "

AutocompleteEditor.prototype.updateChoicesList = function (choices) {

     this.choices = choices;

    this.$htContainer.handsontable('loadData', Handsontable.helper.pivot([choices]));

/*    if(this.cellProperties.strict === true){

      this.highlightBestMatchingChoice();

    }*/

    var value = this.getValue();

    var rowToHighlight;

    if(this.cellProperties.strict === true){

      rowToHighlight = findItemIndexToHighlight(choices, value);

      if ( typeof rowToHighlight == 'undefined' && this.cellProperties.allowInvalid === false){

        rowToHighlight = 0;

      }

    }

    if(typeof rowToHighlight == 'undefined'){

      this.$htContainer.handsontable('deselectCell');

    } else {

      this.$htContainer.handsontable('selectCell', rowToHighlight, 0);

    }

    this.focus();

  };

http://martian36.tistory.com/755

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

example

if(isMobile.any()) {
   //some code...
}

if( isMobile.iOS() ) alert('iOS');

만약 모바일이라는 의미가 작은 스크린을 의미한다면..

var windowWidth = window.screen.width < window.outerWidth ? window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

이렇게 간단한 로직을 추가해도 좋을 듯 하다.

What’s New?

Sencha Touch 2.1 is our next release of the Sencha mobile framework. This release includes the following key upgrades: significant performance improvements, an advanced list component, enhanced native support through the Sencha Mobile Packager and an integrated charting support.

Improved Performance

In Sencha Touch 2.0 some of our developers experienced nested layout performance issues. Our investigations found that by isolating panels and providing more known layout information to the browser the framework and your application will perform faster. We have included this solution in the Touch 2.1 release. The API impact of the change is minimal, but the performance improvement is dramatic.

Advanced List component with Infinite scrolling

new List component is included with this release. This implementation replaces the old list component and is no longer bound one-to-one between a store and DOM elements. This means that the length of the list will no longer have a bearing on it's scrolling performance. In addition, lists can use components if you specify them with an itemConfig and itemTpl will be converted to an itemConfig dynamically if you specify one. Due to these changes, the DOM structure was altered for lists, and you may need to change some CSS selectors to add appropriate styling for your lists. Typically, you need to change the selector from '.x-list-item' to '.x-list-item > .x-dock-vertical > .x-dock-body' for any padding or margins you may have added. We changed the TouchTweets example with the new implementation; instead of using a component based DataView, it now uses the new List. It’s a good example of using the new List component with dynamic large lists.

Enhanced Native Support through the Sencha Mobile Packager

The Sencha Mobile Packager is included in the the Sencha Cmd, previously known as the SDK tools. In this release, we have enhanced native support. For iOS, you can configure your Sencha Touch apps to use the iOS in-app purchase system and native push notifications. Also, you can open another installed application directly within a Sencha Touch app through an open URL call. In previous releases, the native packager allowed you to deploy the app directly to the iOS simulator. We have now added the capability to directly deploy apps to the iOS devices. For Android, you can configure your app upgrade without version changes using the new versionCode key. And for both iOS and Android, you can now access the native contacts API. The packager config also lets you pass in "raw" data to the iOS info.plist and Android AndroidManifest.xml through the rawConfig key. We also heard your feedback about non-admin access to the native packager, and we have updated the setup so admin accounts aren’t required. Another major enhancement is that we’ve given you the ability to write plug-ins for the Sencha Mobile Packager, so you can extend the packager capabilities to fit your needs.

Sencha Touch Charts

We have extended Sencha Touch Charts support in Sencha Touch 2.1. Please refer to the Sencha Touch Charts article for more exciting news about Sencha Touch Charts.

Availability

Sencha Touch 2.1 is in beta. Please give it a try and let us know if you have any feedback. Watch the Sencha Touch Forum for any release update.

보시다시피 기존에는 리스트 컴포넌트에서 store에 데이터와 dom을 1:1 매핑 시켰기 때문에 데이터가 늘어나면 느려지는 현상이 있었는데 dom은 제한 시키고 재사용함으로써 성능을 향상시킨다고 하네요.

또 터치챠트도 2.1에선 호환되게 만든다고 하는군요..

리스트쪽이 느려서 계속 쓸지 말지 고민했는데 지켜봐야겠네요:)

관련 주소는 여기를 참조.

http://www.sencha.com/blog/whats-coming-in-sencha-touch-2-1?mkt_tok=3RkMMJWWfF9wsRokuazPZKXonjHpfsX87O8pUKazlMI%2F0ER3fOvrPUfGjI4ESsN0dvycMRAVFZl5nR9dFOOdfQ%3D%3D

베타 다운로드는 여기를 참조.

http://www.sencha.com/forum/announcement.php?f=105&a=36

Underscore.js

Jeremy Ashkena씨는 작고 유용한 자바스크립트 라이브러리인 Underscore.js를 공개했습니다. 달러("$")가 아닌 언더스코어("_")를 사용하기 때문에 Prototype이나 jQuery의 코어를 확장하지 않는 형태로 Collections, Arrays, Functions, Objects에 대한 45개의 유틸리티 함수들을 제공합니다. 그리고 자바스크립트 1.6에서 제공하는 순수 기능 활용하기 때문에 브라우저가 이를 지원한다면 풀-스피드로 작동하게 됩니다. 벤치마크 페이지에서 직접 테스트 해 보세요.

var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name : 'moe'}, 'hi');
func(); //=> 'hi: moe'

Collections : each, map, reduce, reduceRight, detect, select, reject, all, any, include, invoke, pluck, max, min, sortBy, sortedIndex, toArray, size

Arrays : first, last, compact, flatten, without, uniq, intersect, zip, indexOf, lastIndexOf

Functions : bind, bindAll, delay, defer, wrap, compose

Objects : keys, values, extend, clone, isEqual, isElement, isArray, isFunction, isUndefined

Utility : noConflict, identity, uniqueId, template

RequireJS

Mozilla Labs에 참여하고 있는 James Burke에 의해 개발되고 있는 CommonJS모듈 실행프레임웍의 하나입니다.

RequireJS는 JavaScript파일이나 모듈을 읽을 수 있는 JavaScript라이브러리입니다. 브라우저 내에서 이용할 수 있는 최적화가 되어 있어 Rhino, Node.js라는 다른 JavaScript환경과 조합해서 사용할 수 있습니다. 현재 RequireJS는 IE6이상, Firefox 2이상, Safari 3.2이상, Chrome 3이상, Opera 10이상의 브라우저에서 실행합니다.

RequireJS 2.0에서는 지연모듈 평가나 "shim:{}"설정옵션 추가, 오류백 요청, IE발생하는 로드장해 캐치, 로드장해시 풀백패스, 로더 플러그인 오류 "load.error():"지원, Dojo의 AMD로더 "packageMap"설정과 비슷한 기능을 가진 "map:{}"추가되었습니다.

RequireJS는 BSD스타일라이선스 및 MIT라이선스 듀얼 라이선스를 채용하고 있어 오픈소스로 공개되어 있습니다. 최근 RequireJS는 프로젝트 사이트에서 얻을 수 있고 최근 소스코드는 GitHub에서 관리되고 있습니다.

Modernizr(http://www.modernizr.com)

MIT 라이선스를 가진 오픈소스로 HTML5와 CSS3의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리

Sencha Touch에선 기본 컴포넌트로 그리드를 제공하지 않는다.

단순히 데이터뷰와 리스트정도만 제공하고 있는데 데이터를 여러개 표시할 땐 이 데이터가 무엇을 나타내는지

헤더로 표현해주지 않으면 애매할 경우가 있다.

혹시나 그리드를 구현하는 예제가 있나 구글링을 하다가 찾아냈다.

일단 그냥 쓰기에는 괜찮으나 editable type같은 경우엔 약간의 문제가 있다.

예제 소스 안에 feature폴더에 보면 Editable.js이 있는데 여기에 약간 수정을 해주면

정상적으로 동작한다. 소스는 아래를 참조하길 바란다.

https://github.com/mitchellsimoens/Ext.ux.touch.grid/