extjs 項目中技術要點摘錄

1.利用Newtonsoft.Json.dll解析json數據

    [Serializable]
    public class User
    {
        public string id { get; set; }
        public string userid { get; set; }
        public string username { get; set; }
        public string password { get; set; }
    }
 
List<User> users = JsonConvert.DeserializeObject<List<User>>(jsonData);
foreach(User user in users)
{
}

2.前臺提交後臺

                    handler: function () {
                    form.getForm().submit({
                        success: function (form, action) {
                            window.location.href = 'Index.aspx';
                        },
                        failure: function () {
                            Ext.Msg.alert('錯誤', "用戶名或密碼有錯");
                        }
                    });
                }
 
 Ext.lib.Ajax.request(
                                        'POST',
                                        'UserManage.aspx',
                                        'JurisdictionManage.aspx?nodeid=' + nodeid + '&userid=' + userid,
                                        {success: function(response){
                                            Ext.Msg.alert('信息', response.responseText, function(){
                                                window.location.href = 'UserManage.aspx';
                                        });
                                        },failure: function(){
                                            Ext.Msg.alert("錯誤", "刪除出錯");
                                        }},
                                          'data=' + Ext.util.JSON.encode(jsonArray)
                                    );        

3.grid增加button按鈕事件

{ header: '<b>操作</b>',
                            dataIndex: 'text',
                            align: 'center',
                            sortable: true,
                            width: 165,
                            renderer: showbutton
                        }
 
  function showbutton(value, cellmeta) {
                    var returnStr = "<input class='btn' type='button' value='詳細監測' οnclick= 'buttonclick();'>";
                    return returnStr;
                }
            });
            function buttonclick() {
                //window.location.href('modules/GridMonitor/GridMonitor.aspx?id=');
                //setActiveTab(1);
                top.Ext.getCmp(0).setActiveTab(2);
            }     

4. 遍歷整個tree

//先清空
getAllRoot(tree);
 var result = response.responseText;
                        //有權限的賦值
                        var strs = result.split('&');
                        for(var i = 0; i < strs.length -1 ; i ++)
                        {
                            var n = tree.getNodeById(strs[i]);
                            n.parentNode.attributes.checked = true;
                            n.parentNode.ui.checked = true;
                            n.parentNode.ui.checkbox.checked = true;
                            n.attributes.checked = true;
                            n.ui.checkbox.checked = true;
                        }
 
    function getAllRoot(value){
                var rootNode = value.getRootNode();//獲取根節點
                rootNode.attributes.checked = false;
                rootNode.ui.checkbox.checked = false;
                findchildnode(rootNode); //開始遞歸
                //nodevalue= temp.join(",");
                //alert(nodevalue);
                //return nodevalue;
            }
            //var temp = [];
            //獲取所有的子節點  
            function findchildnode(node){
                var childnodes = node.childNodes;
                Ext.each(childnodes, function (){ //從節點中取出子節點依次遍歷
                    var nd = this;
                    nd.attributes.checked = false;
                    nd.ui.checkbox.checked = false;
                    //temp.push(nd.id);
                    if(nd.hasChildNodes()){ //判斷子節點下是否存在子節點
                        findchildnode(nd); //如果存在子節點 遞歸
                    }  
                });
            }

5.點擊tree節點，連動選中子節點和父節點

listeners: {   
                  "checkchange": function(node, flag) {
                            //獲取所有子節點 
                               node.cascade( function( node ){ 
                               node.attributes.checked = flag; 
                               node.ui.checkbox.checked = flag; 
                               return true; 
                                }); 
                            //獲取所有父節點 
                                var pNode = node.parentNode;
                                for(; (pNode != null && pNode.id !="-1"); pNode = pNode.parentNode ){
                                if (flag || tree.getChecked(id, pNode ) == "") {
                                    pNode.ui.checkbox.checked = flag; 
                                    pNode.attributes.checked = flag; 
                                    }   
                                } 
                    }

6.保存時遍歷左右打勾節點

   var nodevalue;
            function getAllNode(tree){
                var rootNode = tree.getRootNode();//獲取根節點
                findallchildnode(rootNode); //開始遞歸
                nodevalue= temp.join(",");
                return nodevalue;
            }
            var temp = [];
            //獲取所有的子節點  
            function findallchildnode(node){
                var childnodes = node.childNodes;
                Ext.each(childnodes, function (){ //從節點中取出子節點依次遍歷
                    var nd = this;
                    if(nd.attributes.checked == true)
                    {
                       //temp.push('{');
                       temp.push(nd.id);
                       temp.push(nd.parentNode.id);
                       temp.push('}');
                    }
                    if(nd.hasChildNodes()){ //判斷子節點下是否存在子節點
                        findallchildnode(nd); //如果存在子節點 遞歸
                    }  
                });
            }

7.解決日曆控件彈出寬度太小的問題

Ext.isIE8 = Ext.isIE && navigator.userAgent.indexOf('MSIE 8') != -1;
        Ext.override(Ext.menu.Menu, {
            autoWidth: function () {
                var el = this.el, ul = this.ul;
                if (!el) {
                    return;
                }
                var w = this.width;
                if (w) {
                    el.setWidth(w);
                } else if (Ext.isIE && !Ext.isIE8) {   //Ext2.2 支持 Ext.isIE8 屬性    
                    el.setWidth(this.minWidth);
                    var t = el.dom.offsetWidth;
                    el.setWidth(ul.getWidth() + el.getFrameWidth("lr"));
                }
            }
        });

8.彈出加載數據的等待窗體

<body οnlοad="showMsg();" id ="body" style=" width:100%;">
 var myMask;
            function showMsg() {
                myMask = new Ext.LoadMask(Ext.getBody(), { msg: "正在加載數據...請稍候" });
                myMask.show();
            }
myMask.hide();

9.new一個對象彈出window

function showChart()
             {       
                var chart = new Ext.data.JsonStore({
                    fields: ['name', 'visits', 'views'],
                    data: [
            { name: 'Jul 07', visits: 245000, views: 300000 },
            { name: 'Aug 07', visits: 240000, views: 350000 },
            { name: 'Sep 07', visits: 355000, views: 400000 },
            { name: 'Oct 07', visits: 375000, views: 420000 },
            { name: 'Nov 07', visits: 490000, views: 450000 },
            { name: 'Dec 07', visits: 495000, views: 580000 },
            { name: 'Jan 08', visits: 520000, views: 600000 },
            { name: 'Feb 08', visits: 620000, views: 750000 }
                          ]
                });
                  var panel = new Ext.Panel({
                    title: '用電圖表統計',
                    width: 800,
                    height: 500,
                    items: {
                        xtype: 'columnchart',
                        url: '../../ext/resources/charts.swf',
                        store: chart,
                        xField: 'name',
                        series:[
                        {
                        type:'column',
                        yField:'views',
                        displayName:'views'
                        },
                        {
                        type:'column',
                        yField:'visits',
                        displayName:'visits'
                        }]
                    }
                });
                var  win = new Ext.Window({
                    renderTo: 'showWin',
                    width: 800,
                    height: document.documentElement.clientHeight-50,
                    x:200,
                    y:10,
                    closable: false,
                    buttonAlign:'center',
                    items:[panel],
                    buttons:[{text:'日'},{text:'周'},{text:'月'},{text:'年'},{
                        text:'關閉',
                        handler:function(){
                            win.close();
                        }
                    }]                                               
                });
                win.show();           
            }

10.ext form自動加載數據

  var reader = new Ext.data.JsonReader({}, [
              { name: 'roomid', type: 'string' },
              { name: 'size', type: 'string' },
              { name: 'a', type: 'string' },
              { name: 'b', type: 'string' },
              { name: 'c', type: 'string' },
              { name: 'd', type: 'string' },
              { name: 'e', type: 'string' },
              { name: 'f', type: 'string' }
            ]);
 
 var panel = new Ext.form.FormPanel({
                labelAlign: 'right',
                labelWidth: 130,
                reader: reader,
                items: [{
                    layout: 'column',
                    items: [{
                        columnWidth: .50,
                        layout: 'form',
                        items: [{ xtype: 'textfield', fieldLabel: '房間號', width: 110, disabled: true, name: 'roomid' },
                                { xtype: 'textfield', fieldLabel: '面積', width: 110, disabled: true, name: 'size' },
                                { xtype: 'textfield', fieldLabel: '電錶讀數', width: 110, disabled: true, name: 'a' },
                                { xtype: 'textfield', fieldLabel: '當前用能',width: 110,disabled: true,name: 'b'}]
                    }, {
                        columnWidth: .50,
                        layout: 'form',
                        items: [{ xtype: 'textfield', fieldLabel: '日額定單位面積用能', name: 'c', width: 110, disabled: true },
                                { xtype: 'textfield', fieldLabel: '日單位面積用能', name: 'd', width: 110, disabled: true },
                                { xtype: 'textfield', fieldLabel: '用能狀態', name: 'e', width: 110, disabled: true },
                                { xtype: 'textfield', fieldLabel: '系統', name: 'f', width: 110, disabled: true }]
                    }]
                }],
            });
 
   panel.getForm().load({
                url: 'LightingGrid.aspx?num=1',
                method: 'POST',
                success: function (form, action) {
                    panel.load();
                    (action.result.data)
                },
                failure: function (form, action) {
                }
            });
 
後臺json數據:
Response.Write("[{roomid:'237-241',size:'68.7',a:'125.0kwh',b:'0.5kwh',c:'0.34kwh',d:'3.4kwh',e:'正常',f:'穩定'}]");
Response.End();

11. extjs+funsioncharts結合顯示圖表

    var panel = new Ext.form.FormPanel({
                 html: "<div id = \"showWin\"></div>"
            });
 
     var win = new Ext.Window({
                width: 410,
                height: document.documentElement.clientHeight - 120,
                x: 300,
                y: 10,
                closable: false,
                buttonAlign: 'center',
                items: [panel],
                buttons: [{
                    text: '關閉',
                    handler: function () {
                        win.close();
                    }
                }]
            });
            win.show();
            var chartXMLData = "<chart caption='照明情況' subCaption=''>";
            chartXMLData += "<set label='1月' value='" + 5 + "' />";
            chartXMLData += "<set label='2月' value='" + 6 + "' />";
            chartXMLData += "<set label='3月' value='" + 7 + "' />";
            chartXMLData += "<set label='4月' value='" + 8 + "' />";
            chartXMLData += "<set label='5月' value='" + 9 + "' />";
            chartXMLData += "<set label='6月' value='" + 9 + "' />";
            chartXMLData += "<set label='7月' value='" + 9 + "' />";
            chartXMLData += "<set label='8月' value='" + 9 + "' />";
            chartXMLData += "<set label='9月' value='" + 9 + "' />";
            chartXMLData += "<set label='10月' value='" + 9 + "' />";
            chartXMLData += "<set label='11月' value='" + 9 + "' />";
            chartXMLData += "<set label='12月' value='" + 9 + "' />";
            chartXMLData += "</chart>";
            var myChart = new FusionCharts("../../FusionCharts/Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
            myChart.setXMLData(chartXMLData);
            myChart.render("showWin");

12. 子grid選中一行到父grid,grid刪除一行

var rowIndex = gridBuild.store.indexOf(gridBuild.getSelectionModel().getSelected());
                             store1.add(storeBuild.getAt(rowIndex));
                             win.close();
 
var rowIndex = grid2.store.indexOf(grid2.getSelectionModel().getSelected());
                        store2.remove(store2.getAt(rowIndex));

13. editorgrid combobox 驗證完成事件

if(gridBuild.activeEditor != null)
                             {  
                                 gridBuild.activeEditor.completeEdit();
                             }
gridBuild爲editorgrid