블로그 이미지
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

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
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함