블로그 이미지
Xeon의 세상 Xeoness

카테고리

Xeon World (23)
Diary (1)
Tuning (0)
Project (0)
Scrap (0)
Media (0)
L ♡ L (0)
일상생활 (4)
Web Programming (14)
IT 강국? 노가다 강국 (4)
Linux (0)
아리아리 동동~ (0)
Total
Today
Yesterday

'Web Programming'에 해당되는 글 14건

  1. 2010.12.06 Prototype은 무엇인가.?
  2. 2010.01.22 input type file 꾸미기
  3. 2010.01.21 Ext JS - 8. List of component xtype.
  4. 2010.01.21 Ext JS - 7. Simple container layout 생성
  5. 2010.01.21 Ext JS - 6. Form 생성

prototype.jsSam Stephenson에 의해 작성된 자바스크립트 라이브러리이다. 이 놀랍도록 멋진 생각과 표준에 의해 잘 작성된 코드의 일부는 웹2.0의 특성을 나타내는 풍부하고 상호작용하는 웹페이지와 많은 연관을 가진다.

만약 당신이 최근 이 라이브러리를 사용하기 시작했다면, 당신은 아마도 이 문서가 가장 좋은 지시사항중에 하나는 아니라는것을 알아차렸을것이다. 나 이전에 다른 많은 개발자들처럼, 나는 소스코드와 이것을 사용한 경험에서 prototype.js에 대한 지식을 가지게 되었다. 나는 모든 이가 배우고 공유하는 동안 좀더 많은 정보를 얻게 되는게 가장 좋은 것이라고 생각한다.

나는 objects, classes, functions, 그리고 이 라이브러리에 의해 제공되는 확장을 위한 비공식적인 참조문서 또한 제공한다.

당신이 예제와 참조문서를 읽었을때, Ruby프로그래밍 언어에 친숙한 개발자는 Ruby의 내장 클래스와 이 라이브러리에 의해 구현된 많은 확장 사이의 의도적인 유사성을 알아차리게 될것이다.

Posted by Xeoness
, |

input type file 꾸미기


# 1. 이미지로 대체하자.

 

<script>

// 파일찾기
function fncProductFile()
{
 document.Form.txtProductFile.click();
 document.Form.txtProductFileName.value=document.Form.txtProductFile.value;
}
</script>

 

<form name='Form'>

   <input type='file' name='txtProductFile' size="15"style='display:none'>

   또는

   <input type='file' name='txtProductFile' size="15"style='cursor:hand;width:5px;filter:alpha(opacity=0);position:absolute;top:10px;left:40px'>
  

   <input type="Text" style="width:150px;" name="txtProductFileName" class='input' readOnly>
   <img style='cursor:hand' alt="파일찾기" src="./images/btn/btn_search_s.gif" align="absMiddle" border="0" onclick="fncProductFile()">

</form>

 

 

# 2. value값을 초기화하자

file 타입의 input태그는 readOnly 속성이기 때문에 value 속성에 사용자가 임으로 값을 넣을수가 없습니다. 때문에 초기화하고자 할경우 document.file.value = "";처럼 사용하실수가 없겠죠.

이럴때 유용한 방법이 되겠네요... 

 

<form>
    <input type="text" name="txtName"><br>
    <input type="file" name="upload"><br>
     <input type="file" name="upload"><br>
    <input type="button" value=삭제 onclick="fileReset(this.form);">
    <input type="button" value=확인 onclick="alert(this.form.upload.value);">
</form>

 

<script language="JavaScript">
<!--
    function fileReset( form )
    {
        //form.upload.select();   //upload라는 name을 가진 컨트롤 모두 선택됨.

 

       //upload이름을 가진 컨트롤이 많은경우 그중에 하나만 초기화...

       var files = document.getElementsByName("upload");
       files[0].select();
// 첫번째 선택

 

       //선택된 컨트롤의 값 모두 삭제
       document.selection.clear;
 

       // or document.execCommand('Delete');

 

       // 단,  같은 메서드안에서 위코드 이후에 form.submit()사용시 "액세스 거부"에러 발생. 

 

       // 참고로 form안에 있는 모든 컨트롤의 값을 초기화할때

       // form.reset 대신에  document.selection.empty;를 사용해도 같은효과가 나네요.

    }
//-->
</script>



# 3. 업로드전에 파일 사이즈 구하기

<form>


    <input type="file" onChange="getFileSize(this);">
    <img name="tempFile" id="tempFile" width="0" height="0" dynsrc=''>


    <br>
    <span id="sizeReport" style="color:red"></span>  Bytes


    <script language=javascript>
    function getFileSize( obj)
    {
//        var fileObj = document.getElementById("tempFile");
//        fileObj.dynsrc.value = obj.value;

           var img = new Image();
           img.dynsrc = obj.value;
           document.getElementById("sizeReport").innerText = fileObj.fileSize;
    }
    </script>


</form>



# 4. 이미지 업로드시 미리보기

<script language=javascript>
    <!--
        function SignChange(form)
        {
            var defaultSign = "../images/sample.gif";           //기본이미지
            if(form.SignSearch.value != '')
                form.SignImage.src = form.SignSearch.value;
            else
                form.SignImage.src = defaultSign;
        }
    //-->
    </script>

 

<IMG height="50" src="../images/sample.gif" width="50" id="SignImage"><br>

<input class="base" id="SignSearch" type="file" size="20" name="SignSearch"

onpropertychange="FileButtonOnClick(this.form)">


 

Posted by Xeoness
, |

Class Ext.Component

Package: Ext
Defined In: Component.js
Class: Component
Subclasses: BoxComponent, ColorPalette, DatePicker, Editor, BaseItem
Extends: Observable

Base class for all Ext components. All subclasses of Component may participate in the automated Ext component lifecycle of creation, rendering and destruction which is provided by the Container class. Components may be added to a Container through the items config option at the time the Container is created, or they may be added dynamically via the add method.

The Component base class has built-in support for basic hide/show and enable/disable behavior.

All Components are registered with the Ext.ComponentMgr on construction so that they can be referenced at any time via Ext.getCmp, passing the id.

All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or Ext.BoxComponent if managed box model handling is required, ie height and width management).

See the Creating new UI controls tutorial for details on how and to either extend or augment ExtJs base classes to create custom Components.

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. This is the list of all valid xtypes:

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
buttongroup      Ext.ButtonGroup
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
flash            Ext.FlashComponent
grid             Ext.grid.GridPanel
listview         Ext.ListView
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
spacer           Ext.Spacer
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components
---------------------------------------
paging           Ext.PagingToolbar
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button        (deprecated; use button)
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton   (deprecated; use splitbutton)
tbtext           Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu             Ext.menu.Menu
colormenu        Ext.menu.ColorMenu
datemenu         Ext.menu.DateMenu
menubaseitem     Ext.menu.BaseItem
menucheckitem    Ext.menu.CheckItem
menuitem         Ext.menu.Item
menuseparator    Ext.menu.Separator
menutextitem     Ext.menu.TextItem

Form components
---------------------------------------
form             Ext.form.FormPanel
checkbox         Ext.form.Checkbox
checkboxgroup    Ext.form.CheckboxGroup
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
displayfield     Ext.form.DisplayField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
radiogroup       Ext.form.RadioGroup
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Chart components
---------------------------------------
chart            Ext.chart.Chart
barchart         Ext.chart.BarChart
cartesianchart   Ext.chart.CartesianChart
columnchart      Ext.chart.ColumnChart
linechart        Ext.chart.LineChart
piechart         Ext.chart.PieChart

Store xtypes
---------------------------------------
arraystore       Ext.data.ArrayStore
directstore      Ext.data.DirectStore
groupingstore    Ext.data.GroupingStore
jsonstore        Ext.data.JsonStore
simplestore      Ext.data.SimpleStore      (deprecated; use arraystore)
store            Ext.data.Store
xmlstore         Ext.data.XmlStore


자주 사용하게 되는 xtype 의 목록
Posted by Xeoness
, |

<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <!-- 1 -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <!-- 2 -->
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
</script>
</head>
<body>
<script type="text/javascript">
    var childPnl1 = { // childPnl1 이라는 panel 생성
        frame : true,
        height : 50,
        html : 'This is first child panel',
        title : 'First child panel'
    };
   
    var childPnl2 = { // childPnl2 라는 panel 생성
        width : 150,
        html : 'Here is second child',
        title : 'Thanks god it's friday'
    };
   
    var myWin = new Ext.Window({ // childPnl1과 childPnl2를 나타낼 window 생성
        height : 300,
        width : 300,
        modal : true,   // mask 씌우기 true (window가 나타나면 다른 영역은 선택이 불가능)
        title : 'A window with a container layout',
        autoScroll : true, // autoscroll 활성화
        items : [ // window에 들어갈 item
            childPnl1,
            childPnl2
        ],
        tbar : [ // top bar의 내용 (bottom bar 는 bbar)
            {
                text : 'Add child',
                handler : function() {  // handler 를 걸어 버튼으로 작동 가능 (클릭시 panel을 child로 생성)
                    var numItems = myWin.items.getCount() + 1; // window의 item의 갯수 + 1을 식별 번호로...
                    myWin.add({  // window에 panel add
                        title : 'Another child ' + numItems,  // child panel의 title
                        height : 60,
                        frame : true,
                        collapsible : true,  // flip 가능
                        collapsed : true, // 기본으로 접혀 있음
                        html : 'Congratuations!!! you maid another child!' // panel의 내용
                    });
                    myWin.doLayout(); // child panel을 생성한 이후에는 반드시 window에 그려주는 작업을!!
                }
            }
        ]
    });
   
    myWin.show();
</script>
</body>
</html>


-->
기본적으로 페이지가 로딩되면 window 안에 두 개의 패널이 포함되어 있다.
window의 mask를 true로 했으므로 window가 닫히기 전까지는 다른 element를 선택 불가.

상단 바의 'Add child' 버튼을 누르면 새로운 자식 panel이 생성된다.

주석 참고!
Posted by Xeoness
, |


<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
</script>
</head>
<body>
<script type="text/javascript" src="formLayout.js">
    var myWin = new Ext.Window({             // window 생성
        width       : 200,                              // width 200
        bodyStyle   : 'padding: 5px',            // window style 지정 : padding 5px
        layout      : 'form',                          // layout 은 form 형태
        labelWidth  : 50,                            // 각각의 필드에 사용될 라벨의 width 50
        defaultType : 'field',                      // default type 은 field 로 지정
        items       : [                                // window 내부에 들어가는 item 지정
                       {
                           fieldLabel   : 'Name', // 첫 번째로 Name이라는 fieldLabel을 가진 field 생성
                           anchor       : '-4'
                       },
                       {
                           fieldLabel   : 'Age', // 두 번째로 Age라는 fieldLabel을 가진 field 생성
                           width        : 25
                       },
                       {
                           xtype        : 'combo', // 세 번째로 combobox 생성(html의 select)
                           fieldLabel   : 'Location', // combobox의 fieldLabel을 Location으로 지정
                           anchor       : '-4',  // anchor는 100%에서 -4px 
                           store        : ['Here', 'There', 'Anywhere'] // combobox의 option
                       },
                       {
                           xtype        : 'textarea', // 네 번째로 textarea 생성
                           fieldLabel   : 'Bio',      // fieldLabel
                           anchor       : '-4, -134' // anchor 지정
                       },
                       {
                           xtype        : 'panel',    // panel type의 field 생성
                           fieldLabel   : '',
                           labelSeparator : '',
                           frame        : true,
                           title        : 'Instructions',
                           html         : 'Please fill in the form',    // panel 안에 들어갈 html 형식의 text
                           anchor       : '-4'
                       }
                ]
    });
   
    myWin.show();
</script>
</body>
</html>


주석만 보아도 다 알만한 내용들.

Posted by Xeoness
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함