Ext.form.TextField 이벤트(event)처리

txt_qty = new Ext.form.TextField({
                id    : Ext.id(),
                width : 30,
                height: 15
                ,enableKeyEvents: true
                ,onBlue: "javascript:alert('x')"
    });
    txt_qty.on ({
        keyup : {
            fn: function(o,e){
                alert( 'up'+ o.getValue() )
            }
        }
    })

keyup, keydown event는 "enableEeyEvents"가 반듯이 true로 설정 되어 있어야 한다.

Sample of Table layout

var win = new Ext.Window({
    id:'tblayout-win'
    ,width:400
    ,height:300
    ,layout:'table'
    ,layoutConfig:{columns:3}
    ,border:false
    ,closable:false
    ,title:Ext.get('page-title').dom.innerHTML
    ,defaults:{height:30}
    ,items:[{
        html:'cell 1'
    },{
        html:'cell 2'
    },{
        html:'cell 3'
    },{
        html:'cell 4 - colspan 2'
        ,colspan:2
    },{
        html:'cell 5'
    },{
        html:'cell 6 - colspan 2, rowspan 2'
        ,rowspan:2
        ,colspan:2
        ,height:60
    },{
        html:'cell 7'
    },{
        html:'cell 8'
    },{
        html:'cell 9'
    },{
        html:'cell 10'
    },{
        html:'cell 11'
       
    }]
});

json encode util사용

javascript에서 json으로 data passing

aa = ["한글", "id", "contactId", "fullName"];
_params['test']       = Ext.util.JSON.encode( aa );

껌임.

헌데 여기서 엄청난 사질이 있었음...
php쪽

$test = stripslashes( iconv('utf-8', 'cp949', $test ) );
print_r ( json_decode( $test ) )

stripslahses안 해주면 decode안됨

extjs xtype 리스트 정리

가끔 필요할 때가 있더라구..하나 출력 해 놔야 겠음..ㅋㅋ

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
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
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
splitbutton      Ext.SplitButton
statusbar        Ext.StatusBar
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.Viewport
window           Ext.Window

Toolbar components
---------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
     {
        xtype     : 'label',
        width     : 100,
        text      : '지출예정'
    }

numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

grid column사이즈 자동 조절

grid의 view속성의 forcefit을 true로 해 준다.



        view: new Ext.grid.GridView({           
                forceFit: true,           
                enableRowBody: true,           
                emptyText: 'No Record found'       
        })


그 후 grid의 autoExpandColumn 속성에 column의 id를 지정함
    autoExpandColumn: "아이디명"


columns: [
        {
            id: "아이디명",
            header: "상품명",
            dataIndex: 'name',
            sortable: true,
            width: 150,
            align: 'left'
        }]

extjs Grid Model / IMG

 
각 부분에 대한 설명을 상세하게 적을 날이 오겠지.

extjs alert창의 조건에 따라 로직 실행

Ext.Msg.alert ('OK', '삭제?', function(btn){
            if ( btn == "ok" )
            {
                var params = {};
                 params['action']      = "del";
       
                Ext.Ajax.request({
                url: xxx.php',
                success: function( response ){
                    alert ( response.responseText );   
                },
                    failure: function(){ alert("실패") },
                    params: params
                });
            }
        })

ext element object 가져오기

var el = Ext.get("my-div");
getElementById와 같은 역할을 수행함.

extjs eclipse setting

http://www.aptana.com/docs/index.php/Plugging_Aptana_into_an_existing_Eclipse_configuration

위의 링크의 지침에 따라 설치하도록 한다.

oop grid extend 객체 생성 샘플

// function으로 객체 생성
Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
    // grid는 위에서 선언된 var grid = xxx 의 grid 임
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td';
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
    }
};

function으로 객체 생성해서

prototype으로 method 추가 함

사이즈 변경

// panel object를 가져 옴
var instCp = Ext.get('content-panel');

// resize event에 맞춰 dataPanel object의 사이즈 조절 가능
instCp.on('resize',function(){
    dataPanel.setHeight(instCp.getHeight());
    dataPanel.setWidth(instCp.getWidth());
});

가장 기본 component 인 Panel

Form에도 추가 가능 , Tab이 item으로도 사용가능

AutoLoad기능을 사용해 init될때 자동 수행

ex)
///////////////////////////////////////////////////////////////
// tab_item1을 object 외부의 property로 사용하겠다고 선언하다는 의미
this.tab_item1 = new Ext.Panel({
        width:200,
        height:250,
        plain:true,
        title: '매크로',
        autoLoad: {
            url: "function.htm",
            params: { template: "sms", action: "get_macro" }
        }      
});

//////////////////////////////////////////////////////////////////////
//  해당 tab_item1 의 내용을 새로 로딩 할 경우
//  load method를 사용해 준다.
obj_sms.tab_item1.load({
            url: "function.htm",
            params: { template: "sms", action: "get_macro" },
            text: "Loading",
            success: function() {
                alert ( "완료" );
            }
        });

Grid선택 관련

Grid의 1st row 선택...흠..이게 이리 힘드나?
하루 종일 찾았음..
    _grid.selModel.selectRow(0, true);

선택된 row의 정보를 가져오기
var row = _grid.selModel.getSelected();
alert ( row.get('product_id') );  // 이런식으로 데이터를 가져올 수 있다.

Grid column 모델에서 들어오는 값 변경

var cmLIST = new Ext.grid.ColumnModel([
{
  // add text at field
  header: "ID",
  dataIndex: 'id',
  sortable: true,
  renderer: function(v,params,record){
    return 'TOTO-'+v;
  },
  width: 30        
},{
  // add html...
  header: "Field 1",
  dataIndex: 'field1',
  sortable: true,
  renderer: function(v,params,record){
    return '<b>'+v+'</b>';
  },
  width: 50    
}

특정 tab Access 할 경우

function handleActivate(tab){
        alert(tab.title + ' was activated.');
    }

lisntener에서 실행되는 function

event tab

 var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Normal Tab',
                html: "My content was added during construction."
            },{
                title: 'Ajax Tab 1',
                autoLoad:'ajax1.htm'
            },{
                title: 'Ajax Tab 2',
                autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            },{
                title: 'Event Tab',
                listeners: {activate: handleActivate},
                html: "I am tab 4's content. I also have an event listener attached."
            },{
                title: 'Disabled Tab',
                disabled:true,
                html: "Can't see me cause I'm disabled"
            }
        ]
    });

event catch의 다른 방법이 보임

페이지 레이아웃

item의 region이 관건이었음
...흠 그것도 모르고 region을 임의로 지정해서 사용했더니 완전 걸래 됐었음

north
west  center east
south

를 사용해야 함...

// begin of onReady
Ext.onReady(function(){
    new Ext.Viewport({
        layout: 'border',
        defaults: {
            activeItem: 0
        },
        items: [{
            region: 'north',
            title: 'search',
            //html: '<h1 class="x-panel-header">Page Title</h1>',
            contentEl: 'div_header',
            split: true,
            autoHeight: true,
            border: false,
            margins: '0 0 0 0',
            height: 100,
            minHeight: 100
        },  {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            xtype: 'treepanel',
                width: 200,
            autoScroll: true,
            split: true,
            loader: new Ext.tree.TreeLoader(),
            root: new Ext.tree.AsyncTreeNode({
                expanded: true,
                children: [{
                    text: 'Menu Option 1',
                    leaf: true
                }, {
                    text: 'Menu Option 2',
                    leaf: true
                }, {
                    text: 'Menu Option 3',
                    leaf: true
                }]
            }),
            rootVisible: false,
            listeners: {
                click: function(n) {
                    Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' +  attributes.text + '"');
                }
            }
        },        
        {
            region: 'center',
            xtype: 'tabpanel',
            items: {
                title: 'Default Tab',
                html: 'The first tab\'s content. Others may be added dynamically'
            }
        }, {
            region: 'south',
            title: 'Information',
            collapsible: false,
            html: 'Information goes here',
            split: true,
            height: 300,
            minHeight: 300
        }]
    });
})

ext panel 샘플

// This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included.  The basic layout will be:
// +--------+-----------------+
// |   A    |   B             |
// |        |--------+--------|
// |        |   C    |   D    |
// +--------+--------+--------+
var table = new Ext.Panel({
    title: 'Table Layout',
    layout:'table',
    defaults: {
        // applied to each contained panel
        bodyStyle:'padding:20px'
    },
    layoutConfig: {
        // The total column count must be specified here
        columns: 3
    },
    items: [{
        html: '<p>Cell A content</p>',
        rowspan: 2
    },{
        html: '<p>Cell B content</p>',
        colspan: 2
    },{
        html: '<p>Cell C content</p>'
    },{
        html: '<p>Cell D content</p>'
    }]
});

다이나믹 탭 추가

function add_grid( rowIndex )
    {
        // grid object 추가    
        objtext = new Ext.form.TextField({
            name: "txt_trans_no",
            id: "txt_trans_no",
            fieldLabel: '회수 송장번호',
            width: 200,
            allowBlank: false,
            autoShow: true
        });

        // form 생성
        var form = new Ext.form.FormPanel({
            baseCls: 'x-plain',
            labelWidth: 120,
            items: [objtext],
            autoShow: true
        });

        tabs.add({
            title: 'New Tab ' + (++rowIndex),
            items: [form],
            closable:true
        }).show();

        // doLayout을 해야 tabs의 내용이 반영된다.
      // 이걸 안 해서 하루종일 삽질 함..
        tabs.doLayout();
    }

json으로 extjs.store에 load된 data의 엑세스

json 포맷

$val["total_rows"] = 4;
$val["total_price"] = 400;
$val["list"][] = array(
                   trans_date_pos=>"2008-4-4",
                   domain=>"test",
                   warehouse=>"K",
                   qty=>13);
$val["list"][] = array(
                   trans_date_pos=>"2008-4-4",
                   domain=>"test",
                   warehouse=>"K",
                   qty=>13);

Extjs.store

store = new Ext.data.GroupingStore({
        proxy: new Ext.data.HttpProxy(
                   new Ext.data.Connection({
                        url: '_URL_',
                        method: 'POST'
                })),
        reader: new Ext.data.JsonReader({
            totalProperty: 'total_rows',
            root: "list",
            fields: ["trans_date_pos","domain","warehouse","qty"]
        })
    });

Data Access

            return되는 경우 다음과 같이 처리 되어야 함

store.reader.jsonData['total_price']