extjs 项目中技术要点摘录

最新推荐文章于 2016-03-09 13:36:10 发布
最新推荐文章于 2016-03-09 13:36:10 发布
阅读量983 收藏
点赞数
分类专栏： asp.net/javascript 文章标签： extjs function string action layout tree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smileberry1/article/details/6909779
版权

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

smileberry1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs4使用要点个人整理
10-10
这几个月以来自己做extjs4开发整理下来的一些技术要点
Extjs类继承时要点
p2227的专栏
03-11 1243
<br />想用一个树形控件制作一个访问数据库的小工具，其实有一个继承：<br /> <br />Ext.namespace("Kext.tree"); Kext.tree.ReadOnlyAsyncTreePanel = Ext.extend(Ext.tree.TreePanel, { root: new Ext.tree.AsyncTreeNode({ text: '只读动态加载树', draggable: false, id: '0'
EXTJs学习笔记（知识点总结）
落日小屋
05-23 6223
目录 （1）apply()和applyif()区别 （2）get(),getDom(),getCmp()区别
[Extjs项目开发必须知道的技术之一]--apply和applyif
刘阳的专栏
06-15 102
      目前本人在做公司项目的前台框架的升级工作，前台框架使用的是Extjs2，目前需要将框架升级到Extjs4。虽然之前使用Extjs大概快2年啦，但是因为一直没有太多的时间对一些知识点或者关键技术进行深入研究，本人也想写一点自己的积累或者见解，一直也无从下手。所以这次就以升级框架作为契机，深入的对ext的技术点进行研究，希望与大家一起分享。在这个过程中我也会把一些经常遇到知识进行归类、整理...
extjs6.6项目示例
09-13
原生态extjs框架的web项目，用senchacmd成功发布，通过改变base-color改变主题风格，见代码及文档
Extjs中文文档
11-08
Extjs中文文档，包含Extjs的基本语法和各个类的详细说明以及用法。
extjs技术学习资料ppt.zip
最新发布
10-29
extjs技术学习资料ppt
extjs中文api
04-22
extjs(中文api)；
ExtJs3.3中文API.CHM_extjs3.3中文文档_
09-30
extjs3.3的中文文档
extjs的相关属性
生命在于折腾
07-02 2725
通用属性： labelSeparator:''//表示fieldLabel后不会显示冒号“：” readOnly:true//只读 focusCls: 'txtHalfInput'//有焦点时的样式 maxLength:3, enforceMaxLength:true//输入位数check fieldStyle: 'margin-top:3px;'
Ext grid单元格编辑不失去焦点点击保存
liybsea的专栏
03-09 1235
在ext中，editorgrid通常要失去一次焦点才能将最后编辑数 据设置为脏数据提交到后台，下面的方法可以解决这个问题，在window的保存或者提交按钮的事件中加入以下代码： if(cooperationPriceGrid.activeEditor != null){ cooperationPriceGrid.activeEditor.completeEdit()
解决Ext中Editor回车提交时触发两次completeEdit()的问题
java电商源码分享
08-04 690
要使Ext.Editor支持回车提交，增加config completeOnEnter: true 就可以了。   但问题来，当回车后，触发一次  this.completeEdit(); 这时我们可以用弹出提示框做一些判断，当弹出提示框时，由于焦点到了提示框上，又触发了Editor的onblur事件，Editor的onblur中又一次调用了 this.completeEdit();。所以...
(一)Ext要点
虚心求学_一点一滴
01-18 1018
1、Ext是经典的MVC模式 2、继承方法Ext.extend()是通过继承很多现成的组件来方便我们开发的，这个方法其实就是创建一个新类的方法，形式如下：        Ext.extend(baseClass,SubClass,Override)       第一个参数是父类，第二个参数是属性/方法列表。 3、Ext获得元素的方法通过Ext.get("elementID");或者
各种chart图分析
smileberry1的专栏
11-17 5469
1.asp.net chart              Width="200px" align="center">                                      YValueMembers="parentid">
一个递归处理json tree树节点帮助类
smileberry1的专栏
10-27 5394
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls;
fusioncharts 内存疯长解决小例
smileberry1的专栏
11-21 2335
最近在项目中要用到图表，fusioncharts比较漂亮，于是下载了个破解版的，但在实际用的过程中，每打开一个fusioncharts,内存都要增长，暂时用下面方法解决下             var myChart1 = null;             var myChart2 = null;             var myChart3 = null;
asp.net 网页技术要点摘要
smileberry1的专栏
10-27 748
1.定位div在网页中间 <div id="form" style=" position:absolute; width:800px; height:600px; margin-left:50%; left:-400px; "> document.getElementById("form").sty
extjs springboot 项目
08-06
在一个ExtJS和Spring Boot项目中，通常前端使用ExtJS来构建用户界面，后端使用Spring Boot来处理业务逻辑和与数据库的交互。前端的ExtJS代码可以通过使用Ajax请求与后端的Spring Boot应用程序进行通信，并实现数据的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值