소금인형 - SW개발자?

출처: https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing network 요청들 리뷰 By default, DevTools records all network requests in the Network panel, so long as DevTools is open. Stop recording network requests To stop recording requests: Click Stop recording network log on the Network panel. It turns grey to indicate that DevTools is no longer recording request..

CSS로 Font에 border 처리 방법 h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }Hello World (결과)Hello World 출처: http://stackoverflow.com/questions/2570972/css-font-border

Bootstrap에 사용되는 테이블을 sort처리하기 DataTables 공식사이트: https://datatables.net/ 소스 설명: https://datatables.net/examples/styling/bootstrap.html예제: https://www.datatables.net/manual/styling/bootstrap-simple.html 소스파일: 사용시 주의 사항: 태그 안에 를 꼭 추가해 줘야 합니다. 소스 형식 $(document).ready(function() { $('#example').DataTable(); } ); NamePositionOfficeSalaryTiger NixonSystem ArchitectEdinburgh$320,800 // For demo to fit i..

javascript에서 2 decimal (소수점 2자리)로 round하려면, 해당 함수가 없답니다. 방법은 다음과 같이 하면 처리가 가능합니다. [방법1] 곱셈 나눗셈 방식 Math.round(num * 100) / 100 해당 방식으로 하면, 신기하게, 소수점 2자리에서 짤리게 됩니다. 참고: http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places [방법2] .toFixed()를 이용한 소수점 반올림 var twoPlacedFloat = parseFloat(yourString).toFixed(2) 결과 값 >> parseFloat("1.555").toFixed(2); "1.55" parseFloat("1.556").t..

출처: http://stackoverflow.com/questions/22413203/bootstrap-affix-back-to-top-link Now that I understand the Affix component better, I have come up with the solution. After specifying a top offset and adjusting the CSS, it's working nicely. The link will scroll into view and then "pin" to the bottom. For pages which do not have a scroll bar, the link is never enabled. I've updated the JS Fiddle (h..

(인터넷 브라우저)윈도우 창을 줄이거나, 늘리면, Google Chart사이즈는 변동이 없습니다. Google Chart 내용은 HTML5/SVG객체 기반으로 되어 있기에, 자동으로 사이즈가 변경이 안된답니다. 이를 해결하기 위해서, $(window) 객체에 resize함수 처리를 추가해 줘서, 사이즈에 맞게 다시금 drawing 작업을 추가해 주면, 브라우저의 창의 사이즈가 변경되는 동시에, Google Chart도 사이즈가 변경되게 됩니다. [Chart 사이즈만 변경하기] 윈도우 사이즈를 변경 시, Javascript을 이용해서, Redrawing으로 처리하면, 이쁘게 변경이 된답니다. //create trigger to resizeEnd event $(window).resize(function() ..

이미지를 중앙에 정렬하려고 할때, 방법 1) 이미지 자체에 주기 style="padding: 0.5em; width:80%; max-width:1010px; display: block; margin-left:auto; margin-right:auto;" 방법 2) 로 감싸서 주기 또는, 에 감싸주기 참고: [html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

영문에서 사용되는 font를 이쁘게 하기 위해서, Segoe UI를 많이들 사용하는데요. CSS을 다음과 같이 사용하시면, Segoe UI Lighter가 됩니다. font-family: Segoe UI; font-weight: lighter; 출처: "Segoe UI Light" font does not render in FireFox7 [ Segoe UI폰트를 사파리에서 사용하기 ] First of all there are difrent types of fonts for every browser. To make sure that it will work in every browser You need to put at least 3 types: eot, ttf, woff (and svg). The bes..

jQuery UI을 이용한 Date Picker만들기 Date: jQuery Calendar Plugin 들DEMO Page / jQuery Event Calendar Plugin examples | jQuery Event Calendar Plugin downloadhttp://www.vissit.com/jquery-event-calendar-plugin-english-version

White-space 공백 줄바꿈문자 처리 방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등) white-space:normal; 출처: http://dolly77.tistory.com/5

프린트 할때, 특정 영역 출력되지 않게 하는 CSS 방법 아래의 class="no-print"한 영역은 출력이 되지 않는다. [ CSS 영역 ]@media print{ .no-print, .no-print * { display: none !important; } } [ HTML 영역 ] 참고: http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page [ Chrome에서 Print 옵션에 Headers and footers 없애기 ] @page { margin: 0; }으로 주게 되면, 해당 옵션이 없어집니다.@media print { .no-print, .no-print * { display: no..

Grid DB Paging https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.toolbar.Paging 화면 페이지 예제 기본 소스Ext.onReady(function(){ var store1 = Ext.create( 'Ext.data.Store', { autoLoad: true, pageSize: 5, fields: ['idx','title','contents','author','create_date'], proxy: { type: 'ajax', api: { read: '/json/post.php' }, reader: { type: 'json', rootProperty: 'data' } } } ); Ext.create( 'Ext.grid.Panel..

Ext.grid.Panel 에 .reconfigure() 함수 처리 이벤트 발생시(버튼을 클릭시등) 그리드의 영역에 다른 데이터 형태의 값을 넣을 때. 사용되는 함수(=메서드)한페이지에 다양한 Grid 결과를 사용할때 유용하다. Ext.grid.Panel클래스의 reconfigure([store],[columns]) 메서드 사용 grid 또는 tree에 새로운 store와 columns으로 재구성한다. [ 사용방법 ] Ext JS Docs: reconfigure 그리드객체.reconfigure(store,columns); 실제적으로, 한개만 설정도 가능하다.그리드객체.reconfigure(store);// or그리드객체.reconfigure(columns);// or그리드객체.reconfigure(nul..

Grid + AJAX(JSON) 만들기Grid에 JSON포멧의 Ajax통신을 통한 데이터를 자져오는 처리에 대해서 만들어 본다. data: config값을 proxy: config로 변경합니다. autoLoad: true 또한 추가한다. (즉시 출력시 설정 / 특정 이벤트를 받은 다음에 데이터 출력을 위해서는 autoLoad: false로 지정) proxy 속성: 통신 방식에 따라 여러가지 타입 지원- type: 'memory' 서버 통신이 이루어지지 않을 경우 사용되는 타입- type: 'ajax' 서버통신에서 응답을 받아 데이터를 로드하는 방식- type: 'jsonp' 다른 도메인간의 Ajax통신을 하여 응답값을 주고 받을 때 사용되는 방식 / 전송시, callback parameter가 별도로 필..

Ext.grid.Panel그리드(Grid)는 표 형식의 데이터를 나타내는 컴포넌트로, 참 많이 사용됩니다.여기서 컬럼에 어떤 field를 뿌려줄지 dataIndex configs로 정의를 해줘야 한다. 설정이 없으면, combox 에 dispalyField/valueField 미정의시 처럼 화면에 나오지 않게 된다.Ext.onReady(function(){ Ext.create( 'Ext.grid.Panel', { title: 'Grid 예제', columns : [ {flex: 1, text:'첫번째', dataIndex:'first'},{flex: 1, text:'두번째', dataIndex:'second'} ], store : Ext.create( 'Ext.data.Store', { fields: [..

dataview 레이아웃 구성을 사용하기 위해 Bootstrap(부트스트랩)을 함께 사용해 봅니다.기존의 ExtJS CSS 부분의 다음의 Bootstrap CDN링크를 넣어준다. 부트스트랩 CDN 패널 안에 xtype:dataview 코드 작성tpl config 은 html config와 다른 속성입니다. (java의 JSTL와 흡사, 내부에 반복/조건문 사용 가능)Ext.onReady(function(){ Ext.create( 'Ext.Panel', { title: 'Dataview List', items: [{ xtype: 'dataview', tpl: new Ext.XTemplate( '', ' 목록 1', ' 리스트 2', ' 리스트 3', '' ) }], renderTo: Ext.getBody(..

콤보 박스(xtype:combo) 데이터를 화면에 출력을 하려면, 데이터스토어(Ext.data.Store)에 대해서 알아야 합니다. 데이터 스토어 정의 : 스토어 클래스는 모델 객체의 클라이언트 측의 캐시를 캡슐화 합니다. 스토어는 프로시를 경유하여 데이터를 로드하고, 또 그 안에 포함되어 있는 모델/인스턴스를 정렬 필터링 및 조회가기 위한 기능을 제공합니다.스토어의 작성은 간단합니다. 데이터 스토어는 여러 컴포넌트에서 사용이 되고 있습니다. Store클래스 사용하는 컴포넌트콤보박스 : Ext.form.field.ComboBox데이터뷰 : Ext.view.View그리드 : Ext.grid.Panel트리 : Ext.tree.Panel (Ext.data.TreeStore: Store개념은 동일하나 사용되는 ..

폼 필드 (form 필드) 일반적으로 태그 형식을 사용한다. xtype: 'textfield' xtype: 'filefield' xtype: 'textfield', inputType:'password' xtype: 'checkbox xtype: 'textarea'value : 'yes'는 입력값을 표시fileLavel:'text' 은 입력창 앞에 오는 Label 형식으로 쓰인다.* 슬라이더 / 컬러피커 등의 다양한 유요한 폼필드는 Plug 형태의 클래스를 적용해서 사용이 가능하다. 폼 패널을 이용한 Server 데이터 전송은 따로 작업이 필요하다.SelectBox와 동일한 콤보 박스는 Store라는 데이터저장소 개념의 이해가 필요하다.Ext.onReady(function(){Ext.create('Ext...

탭 패널 개념 Ext.tab.Panel하나의 영역에 여러개의 패널 탭으로 나눠서 클릭시 해당 존재하는 화면 출력 tab > 하위 패널 개념 Tab 패널 만들기Ext.create( 'Ext.tab.Panel', { width: 480, height: 200, items : [ { title: 'Tab 1', html: 'Tab 1 Body' }, { title: 'Tab 2', html: 'Tab 2 Body' }, { title: 'Tab 3', html: 'Tab 3 Body' } ], renderTo: Ext.getBody()}); 탭의 화면 Tab 패널안에 items 넣기Ext.create('Ext.tab.Panel', { width: 480, height: 200, items : [ { title..

윈도우 (Window)창 제어하기 모달창 / 레이어 팝업 autoSwho:true를 하면, 생성시 자동으로 보여지게 된다. (Default: false)Ext.create('Ext.window.Window',{width: 300, height:200, autoShow:true}); autoShow:falsevar winObj = Ext.create('Ext.window.Window',{width: 300, height:200, autoShow:false}); ...{ xtype : 'button', text : 'default button', handler : function() { winObj.show(); }} maximizable: true - 최대창 버튼 (Default: false)modal: ..

ExtJS의 메시지창 일반 자바스크립트에서는 alert, confirm, prompt 메시지 창을 사용합니다. Alert: Message Box일반적인 알림메시지창Ext.Msg.alert( '제목부분', '내용부분입니다.', function(){ /* OK버튼 클릭시 핸들링 */ } ); Confirm: Message Box확인 메시지 창Ext.Msg.confirm( '제목부분', '내용부분입니다.', function(btn){ /* OK버튼 클릭시 핸들링 */ if(btn == 'yes') alert('YES')else alert('NO');} ); Toast: Message Boxmessage: 'closable' - 창닫기 버튼 없음align: 속석으로 나타나는 위치을 설정 ( t / tr / br..

기본 페널(Panel)width, height 설정한 예제Ext.onReady(function(){ Ext.create('Ext.Panel', { width: 300, height: 300, renderTo: Ext.getBody() }); }) 기본패널(Panel) + Title + htmltitle 값으로는 TEXT와 HTML이 가능하다.html값에는 패널 안에 html이 입력됩니다.Ext.onReady(function(){Ext.create('Ext.Panel', { width: 300, height: 300, title : 'Title Configs', html : 'HTML BODY PAGE Html TAG', renderTo: Ext.getBody() }); }) 기본패널(Panel) + it..

이벤트 핸드로는 2가지 : handler / listenerslisteners는 json Array형태로 선언해 주면 된다. 예제 버튼 클릭하면, Alert창 띄우기{ xtype: 'button', text: 'EventTEST', // handler : function () { // Ext.Msg.alert('Title','Click!!'); // } listeners : [{ click : function() { Ext.Msg.alert('Title', 'Click2'); } }] } Event 화면

ExtJS 기본 구조기본 문법은 JSON 규약을 따름단일 속성: "{}"다중 속성: "[{},{}] ExtJS onReady : HTML 페이지가 출력 된 후, 수행Ext.onReady(function (){// 코드 위치}); Ext.create('클래스명',{},콜백) Ext.define된 클래스를 사용할때 사용가능Ext.create('Ext.panel.Panel',{}); Configs 이해하기컴포넌트마다 지원하는 Config(속성)이 다양한 속성을 가지고 있으며, 해당 속성값을 객체 생성시 설정이 가능하다.해당 속성을 누르면, 해당 속성의값의 타입(ex: Number, String)을 확인할 수 있습니다. 원하는 위치에 출력하기 (renderTo)Ext.create를 이용해서, 생성시 화면에 출력..

ExtJS 시작하기ExtJS 프레임워크 다운르도 > Sencha 홈페이지 1. 사이트 다운로드http://www.sencha.com/legal/GPL/ >> ExtJS선택 / 이메일 2. 회신 메일에서 다운로드메일로 ext-5.1.1-gpl.zip을 받을 수 있습니다. 3. 압축해제 4. 해당 부분 복사./build/packages//build/ext-all.js 5. 예제 파일 만들기 참고: http://mongodev.tistory.com/3 Theme 관련packages/ext-theme-XXX 형태의 디렉토리에 있다.aria: Black classic: Bluecrisp: ExtJS 5부터 지원crisp-touchgray: Grayneptune: ExtJS 4부터 지원 neptune-touch: ..

Sencha User Group을 운영하고 계시는 김종광님이 올려준 동영상의 소개해준 Link들입니다.동영상 URL : http://olc.oss.kr/lec/detail.jsp?lec_idx=417 (목차: 19번 "센차 입문자를 위한 핵심 가이드" ) Touch 2.2.1 Sencha Docs동영상: http://docs.sencha.com/touch/2.2.1/#!/video/class-system Class System Intro to Layouts Tabs and Toolbars MVC in Depth Part 1 MVC in Depth Part 2 >Doc 문서 중에 http://docs.sencha.com/touch/2.3.1/#!/guideOverview > Introduction to S..

출처: [기타] get방식의 길이제한 post와 get방식의 차이점을 정리하던 중 get방식의 길이제한에 대하여 의문이 들어 이렇게 정리한다. GET방식 데이터 전송방법 get방식이 데이터를 전송하는 방법은 주소(url)뒤에 구분자를 이용하여 데이터를 보내는 방식이다. 그렇다면 url뒤에 한없이 데이터를 붙여서 서버에 보내는 것이 가능한 일일까? 실제로 많은 블로그를 찾아보면 get방식의 단점으로 데이터를 보내는데 길이의 제한이 있다는 것이 post와의 차이점으로 나타내고 있다. 그렇다면 여기서 get방식의 길이제한은 얼마나 있는 것일까? 내가 찾아본 자료에 따르면 지금은 현재 IE를 제외하고는 나머지 브라우저들은 GET방식으로 데이터를 보내는데 제한이 없다. IE ( Internet Explorer )..

ExcellentExport.jsjavascript를 이용한 excel과 csv 다운로드 만들기 모듈 정말 간결하게 Excel을 다운로드 처리하게 만들었네요. 좋네요. (추가 내용: 2017/01/31) 1.4버전에서는 Microsoft Edge Browser에서 다운로드가 안됩니다. 2.0버전으로 수정해 주시면 됩니다. (추가내용: 2017/11/22)3.0+도 나옴. 해당 버전은 xlsx도 지원, 멀티탭도 지원된다고 하네요. Javascript export to Excel 100 200 300 400 500 600 Excel 다운로드 만들기 Export table to Excel 첨부파일 (과거버전) 첨부파일2 (Edge 엣지 브라우저 지원) 개인적으로 이름을 받는 형식으로 변경하면 좋을 것 같아서 ..

프로그램에서 반복적으로 실행하는 Javascript 함수( setInterval )입니다. [ 반복적으로 실행 - ] SyntaxsetInterval(function,milliseconds,param1,param2,...) 예제Try it 예제2Try it [ 예제3 - 시계 clearInterval 함수 ] Stop time [참고]setInterval : http://www.w3schools.com/jsref/met_win_setinterval.aspclearInterval : http://www.w3schools.com/jsref/met_win_clearinterval.asp

[ javascript ] 새창 띄우기 ( window.open 함수 ) Javascript의 함수를 이용해서 새로운 팝업창을 만듭니다. URL영역은 과거에는 숨길 수 있었지만, 요즘의 사용하는 Browser에서는 숨길 수 없습니다. (참고) 파라미터 중에 WindowName이 같으면, 같은 창으로 띄워줍니다. 1. window.open(URL, WindowName [, WindowFeatures]); 1) URL - 웹 문서 URL 2) WindowName - open 창 이름 (target 이름) 3) WindowFeatures - fullscreen = 전체 창. (yes/no)(default : no) - location = 주소창이 활성화. (yes/no)(default : yes) - menu..