Develop Note

[Javascript]

function topNaviClick(obj) {

var tabId = $(obj).text();

  //Tree 모두 접기

App.TreePanel1.collapseAll();

       //Tree 전체 Node 가져오기

App.TreePanel1.getRootNode().cascadeBy(function (node) {                         

if (node.data.name == tabId) {

 //id로 node record 가져오기

var parentRecord = App.TreePanel1.getStore().getNodeById(node.id);

parentRecord.expand();

if (node.childNodes[0] != null) { 

var seletedRecord = App.TreePanel1.getStore().getNodeById(node.childNodes[0].id);

   //Tree 선택 ( 선택되어도 click event는 발생 안함 그래서 아래 .on 이벤트 사용 )

App.TreePanel1.getSelectionModel().select(seletedRecord);

}

App.TreePanel1.on('click', addTab());

}

});

}

[HTML]

<ext:TextField ID="PasswordField" Name="Pass" runat="server" FieldLabel="비밀번호" AllowBlank="false" InputType="Password" Regex="" EmptyText="비밀번호 8 ~ 12자리" AnchorHorizontal="100%" MsgTarget="Side" MinLength="8" MaxLength="12">

<Listeners>

<ValidityChange Handler="this.next().validate();" />

<Blur Handler="this.next().validate();" />

</Listeners>

</ext:TextField>

<ext:TextField Name="PassConfirm" runat="server" FieldLabel="비밀번호 확인" InputType="Password" Vtype="password" EmptyText="비밀번호 8 ~ 12자리" AnchorHorizontal="100%" MsgTarget="Side" VtypeText="입력된 비밀번호와 일치하지않습니다." MinLength="8" MaxLength="12">

<CustomConfig>

<ext:ConfigItem Name="initialPassField" Value="PasswordField" Mode="Value" />

</CustomConfig>

</ext:TextField>

[체크]

비밀번호 최소 4 최대 12자리

비밀번호, 비밀번호 확인 비교

*ToolTip 생성

[javascript 부분]

$(document).ready(function () {

var view = App.GridPanel1.getView();

var tip = Ext.create('Ext.tip.ToolTip', {

// The overall target element.

target: view.el,

// Each grid row causes its own separate show and hide.

delegate: '.x-grid-cell',

// Moving within the row should not hide the tip.

trackMouse: true,

// Render immediately so that tip.body can be referenced prior to the first show.

renderTo: Ext.getBody(),

listeners: {

// Change content dynamically depending on which element triggered the show.

beforeshow: function updateTipBody(tip) {

var store = App.GridPanel1.getStore();

var record = view.getRecord(view.findItemByChild(tip.triggerElement));

var column = view.getHeaderByCell(tip.triggerElement);

var data = record.get(column.dataIndex);

tip.update(data);

}

}

});

});

# Chart 중 Limit 기능 ( example 위치 : chart > column > Limit

  //Javescript에서 호출하기위해 Namespace 추가

  [DirectMethod(Namespace = "ChartData")]

public void RowSelected(object obj)

{

     //Remove해주는 이유 : remove 안하면 limits 선으로 average 표시한거 처음 값 고정.. remove하고 데이터 넣어줘야 다시 그림.

Chart1.GetStore().RemoveAll();

Dictionary<string, object> dic = (Dictionary<string, object>)JsonConvert.DeserializeObject(obj.ToString(), (typeof(Dictionary<string, object>)));

var axis = Chart1.Axes[0] as NumericAxis;

var value = Math.Round(Convert.ToDouble(dic["Average"]), 2);

    //average 표시 부분

axis.Limits = new Limits

{

new AxisLimit

{

Value = value,

Line = new LimitSprite

{

LineDash = new int[] { 2, 2 },

StrokeStyle = "red",

Title = new Sprite

{

Text = "Average : " + value,

StrokeStyle = "red"

}

}

}

};

Chart1.GetStore().DataSource = new List<object[]>

{

new object[]{ "English", dic["English"] },

new object[]{ "Language", dic["Language"] },

new object[]{ "Math", dic["Math"] },

new object[]{ "Science", dic["Science"] },

new object[]{ "Society", dic["Society"] }

};

Chart1.GetStore().DataBind();

}

DataView를 이용한 이미지 

데이터 : Store에 있음

[Html]

<Listeners>

<SelectionChange  Fn="selectionChanged" />

</Listeners>

[Javascript]

function selectionChanged(dv, nodes) {

if (nodes[0] != null) {

App.SelectedImg.setImageUrl(nodes[0].data.url);

}

};

*DirectEvent로 값 받아오기

[HTML 부분]

<ext:Button runat="server" Text="수정" Icon="BulletBlue">

<DirectEvents>

<Click OnEvent="Update">

<ExtraParams>

<ext:Parameter Name="Values" Value="App.GridPanel1.getRowsValues({selectedOnly:true})" Mode="Raw" />

</ExtraParams>

</Click>

</DirectEvents>

</ext:Button>

[C# 부분]

protected void Update(object sender, DirectEventArgs e)

{

string json = e.ExtraParams["Values"]; (ext:Parameter Name 값)

Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json);

title.Text = companies[0]["Product"]; (row Column명)

content.Text = companies[0]["Price"];

Win1.Show();

}

* Javascript로 값 받아오기

[HTML 부분]

<Click Fn="Detail" /> ( 자바스크립트 Function 호출 방식 )

[Javascript 부분] ( JQuery 사용)

function Detail() {

var value = App.GridPanel1.getRowsValues({ selectedOnly: true });

$('#title1-inputEl').val(value[0].Product);

$('#content1-inputEl').val(value[0].Price);

}

* 선택된 Row 값 가져오기

[Javascript 부분]

App.GridPanel1.getSelectionModel().getSelection()[0].data

var frm = this.up('form').getForm();

            frm.submit({

                standardSubmit: true,

                url: "/main/main.aspx",

                method: "POST"

            });

* tab 추가

var tab = App.TabPanel1.add({

                                id: id,

                                title: id,

                                closable: true,

                                loader: {

                                    url: url,

                                    renderer: "frame",

                                    loadMask: {

                                        showMask: true,

                                        msg:"Loading"

                                    }

                                }

                 });

* 추가된 tab 선택 활성화

App.TabPanel1.setActiveTab(tab);

TreePanel 값 호출

* 선택된 노드의 이름

App.TreePanel1.getSelectionModel().getSelection()[0].data.name

* 선택된 노드의 자식 수 ( 자식이 없으면 null )

App.TreePanel1.getSelectionModel().getSelection()[0].data.children.length