用Ext JS+ Ajax 实现的一个树形和表格的联动模块 支持树和表格之间的节点拖放 源码

最新推荐文章于 2020-01-02 17:23:35 发布
最新推荐文章于 2020-01-02 17:23:35 发布
阅读量8.3k 收藏 1
点赞数
分类专栏： javascript+ajax 文章标签： ajax ext function menu header mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Milanpiaoxiang/article/details/5516694
版权

 var mygroup = new Ext.WindowGroup();
 var mygroup1 = new Ext.WindowGroup();
 var mygroup2 = new Ext.WindowGroup();
 var ddrow;
 var cm;
 var store;
 var count;
 var mytb= new Ext.Toolbar();
 var mytb1=new Ext.Toolbar();;
 Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 var MyRecord=Ext.data.Record.create
    {
    [
            {name:'name',type:'string'},
            {name:'email',type:'string'},
            {name:'country',type:'string'},
            {name:'company',type:'string'},
            {name:'phone',type:'string'},
            {name:'fax',type:'string'},
            {name:'mobile',type:'string'},
            {name:'group',type:'string'},
            {name:'notes',type:'string'}
    ]
    };
var Record = Ext.data.Record.create([
        {name: 'name', type: 'string'},
        {name: 'email', type: 'string'},
        {name: 'country', type: 'string'},
        {name: 'company',type: 'string'},
        {name: 'phone', type: 'string'},
        {name: 'fax', type: 'string'},
        {name: 'mobile',type: 'string'},
        {name: 'group',type: 'string'},
        {name: 'notes',type: 'string'}
    ]);
 var rid;
 var grid;
 var form;
 var uploadform;
 var data =new Array();
 var allcountry="Andorra,United Arab Emirates,Afghanistan,Antigua and Barbuda,Anguilla,Albania,Armenia,Netherlands Antilles,Angola,Argentina,American Samoa,Austria,Australia,Aruba,Azerbaijan,Bosnia Hercegovina,Barbados,Bangladesh,Belgium,Burkina Faso,Bulgaria,Bahrain,Burundi,Benin,Brunei Darussalam,Bolivia,Brazil,Bahamas,Bhutan,Botswana,Belarus,Belize,Canada,Cocos Islands,Central African Republic,Congo,Switzerland,Ivory Coast,Cook Islands,Chile,Cameroon,China,Colombia,Equatorial Guinea,Costa Rica,Cuba,Christmas Island,Cyprus,Czech Republic,Germany,Djibouti,Denmark,Dominica,Dominican Republic,Algeria,Ecuador,Estonia,Egypt,Western Sahara,Spain,Ethiopia,El Salvador,Finland,Fiji,Falkland Islands,Micronesia,Faroe Islands,France,Gobon,Great Britain (UK),Grenada,Georgia,French Guiana,Ghana,Gibraltar,Greenland,Gambia,Guynea,Guadeloupe,Greece,Guatemala,Guam,Guinea-Bissau,Guyana,Honduras,Croatia,Haiti,Hungary,Indonesia,Ireland,Israel,India,British Indian Ocean Territory,Iraq,Iran,Iceland,Italy ,Jamaica,Jordan,Japan,Kenya,Kyrgyzstan,Cambodia,Kiribati,Comoros,Korea-North ,Korea-South ,Kuwait ,Cayman Islands,Kazakhstan ,Lao People's Republic,Lebanon,St.Lucia,Liechtenstein,Sri Lanka ,Liberia ,Lesotho,Lithuania ,Luxembourg,Latvia,Libya,Morocco,Monaco,Moldova,Madagascar,Marshall Islands ,Mali,Myanmar,Mongolia ,Northern Mariana Islands,Martinique ,Mauritania ,Montserrat,Malta ,Maldives ,Malawi ,Mexico,Malaysia ,Mozambique,Namibia ,New Caledonia,Niger,Norfolk Island,Nigeria,Nicaragua,Netherlands,Norway,Nepal,Nauru,Niue,New Zealand ,Oman ,Panama ,Peru ,French Polynesia ,Papua New Guinea,Philippines,Pakistan,Poland,Pitcairn Island,Puerto Rico,Portugal,Palau,Paraguay,Qatar,Reunion Island,Romania,Russian Federation,Rwanda,Saudi Arabia,Solomon Islands,Seychelles,Sudan,Sweden,Singapore,St.Helena,Slovakia,Sierra Leone,San Marino,Senegal,Somalia,Suriname,Syrian Arab Republic,Swaziland,Chad,French Southern Territories,Togo,Thailand,Tajikistan,tokelau,Turkmenistan,Tunisia,Tonga,East Timor,Turkey,Tuvalu,Tanzania,Ukrainian SSR,Uganda ,United Kingdom,United States,Uruguay ,Vatican City State,Venezuela,Virgin Islands,Vietnam,Vanuatu,Samoa,Yemen,Yugoslavia,South Africa,Zambia,Zaire,Zimbabwe";
 var countrys=allcountry.split(',');
 for(var i=0;i<countrys.length;i++)
 {
  data[i]=[countrys[i],countrys[i]];
 }
 Ext.onReady(function()
    {
    var GroupsDt =Web_Memo.ReturnGroup().value;
    var tb = new Ext.Toolbar();
    tb.render('menu');
 //add  menu
 var menu1_1= new Ext.menu.Menu();
 if(GroupsDt.Rows.length!=0)
 {
 for(var i=0;i<GroupsDt.Rows.length;i++)
 {
  var mygroupid=GroupsDt.Rows[i].groupid;
  var mygroupname=GroupsDt.Rows[i].GroupName;
  menu1_1.add(
  new Ext.menu.CheckItem({
  text:"<tr><td align=/"left/"><span style=/"font-size:10px;/" οnclick=/"showTree('"+mygroupid+"','"+mygroupname+"')/">"+mygroupname+"</span></td></tr>",
  checked:false,
  group:'group1_1',
  handler:function(item,checked)
  { 
  //debugger
   //showTree(mygroupid,mygroupname);
  }
  })
  );
 }
 }
 else
 {
  menu1_1.add(
  new Ext.menu.CheckItem({
  text:'<span style="color:Gray;font-style:italic;">No Group.</span>',
  checked:false,
  group:'group6',
  handler:function(item,checked)
  {
  }
  })
  )
 }
 
 //
  var menu1 = new Ext.menu.Menu();
    menu1.add(
  new Ext.menu.CheckItem({
  text:"Input contact info",
  checked:false,
  group:'group1',
  handler:function(item,checked)
  { 
   inputInfo();
  }
  })
  );
  menu1.add(
  new Ext.menu.CheckItem({
  text:"Drag and drop from groups",
  checked:false,
  group:'group1',
  menu:menu1_1,
  handler:function(item,checked)
  { 
  }
  })
  );
//sort by menu
  var menu2= new Ext.menu.Menu();
  menu2.add(
  new Ext.menu.CheckItem({
  text:"Company",
  checked:false,
  group:'group2',
  handler:function(item,checked)
  { 
  Groupby('company');
  }
  }),
   new Ext.menu.CheckItem({
  text:"Country",
  checked:false,
  group:'group2',
  handler:function(item,checked)
  { 
  Groupby('country');
  }
  }),
   new Ext.menu.CheckItem({
  text:"Group",
  checked:false,
  group:'group2',
  handler:function(item,checked)
  { 
  Groupby('group');
  }
  })
  )
  // Impot menu
  var menu3= new Ext.menu.Menu();
  menu3.add(
  new Ext.menu.CheckItem({
  text:"Download Template",
  checked:false,
  group:'group3',
  handler:function(item,checked)
  {
   window.open('../Templates/Template.xlsx');
  }
  }),
   new Ext.menu.CheckItem({
  text:"Upload Excel worksheet",
  checked:false,
  group:'group3',
  handler:function(item,checked)
  { 
   UploadExcel();
  }
  }),
   new Ext.menu.CheckItem({
  text:"<span style=/"color:Gray;/">Upload Outlook file</span>",
  checked:false,
  group:'group3',
  handler:function(item,checked)
  { 
  }
  })
  )
  //orgiginal view
   var menu4= new Ext.menu.Menu();
   //
    menu4.add(
  new Ext.menu.CheckItem({
  text:"Save",
  checked:true,
  group:'group4',
  handler:function(item,checked)
  { 
  SaveUpdates();
  }
  })
  );
  menu4.add(
  new Ext.menu.CheckItem({
  text:"Return to original view",
  checked:false,
  group:'group4',
  handler:function(item,checked)
  { 
  reload();
  }
  })
  );
  //
    tb.add(
    {text:'Add',menu:menu1},
    {text:'Group by',menu:menu2},
    {text:'Import',menu:menu3},
    {text:'Action',menu:menu4}
    )
   tb.addClass("toolbarclass");
 //grid
 cm = new Ext.grid.ColumnModel([
        {header:'Name',dataIndex:'name',width:200,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank:false
        })),clicksToEdit:2},
        {header:'Email',dataIndex:'email',width:200,sortable:true},
        {header:'Country',dataIndex:'country',width:200,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Company',dataIndex:'company',width:200,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Phone',dataIndex:'phone',width:200,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Fax',dataIndex:'fax',width:200,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Mobile',dataIndex:'mobile',width:200,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
//         {header:'Address',dataIndex:'address',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
//            allowBlank: true
//        })),clicksToEdit:2},
         {header:'Group',dataIndex:'group',width:200,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Notes',dataIndex:'notes',width:200,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2}
    ]);
    store = new Ext.data.Store({
        //proxy: new Ext.data.HttpProxy({url:'MemoData.aspx'}),
        proxy: document.getElementById("ctl00_ContentPlaceHolder1_reflag").value==""?(new Ext.data.HttpProxy({url:'MemoData.aspx'})):(new Ext.data.HttpProxy({url:'MemoData.aspx?flag='+document.getElementById("ctl00_ContentPlaceHolder1_reflag").value})),
        reader: new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'
        }, [
            {name:'name'},
            {name:'email'},
            {name:'country'},
            {name:'company'},
            {name:'phone'},
            {name:'fax'},
            {name:'mobile'},
            //{name:'address'},
            {name:'group'},
            {name:'notes'}
           
        ])
    });
    //
     grid = new Ext.grid.EditorGridPanel({
        loadMask:true,
        autoHeight: true,
        //autoWidth:false,
        //autoScroll:true,
        stripeRows:true,
        renderTo: 'grid',
        //enableDragDrop:true,
        store:store,
        cm: cm,
       viewConfig:{
       forceFit:true
       },
       autoExpandColumn:'notes',
       bbar:new Ext.PagingToolbar(
       {
       pageSize:20,
       store:store,
       displayInfo:true,
       displayMsg:'Item{0} To {1},Total{2}',
       emptyMsg:"No Message"
       }
       )
    });
   
    store.load({params:{start:0,limit:20}});
   
   ddrow = new Ext.dd.DropTarget(grid.container, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data){
       //debugger
        var node =data;
        if(node.node.attributes.value=='person')
        {
          var name = node.node.attributes.text;
          var country=node.node.childNodes[0].text;
          var company=node.node.childNodes[1].text;
          var email= node.node.childNodes[2].text;
          var phone= node.node.childNodes[3].text;
          var mobile= node.node.childNodes[4].text;
          var fax= node.node.childNodes[5].text;
          var p = new Record({
            name: '',
            email: '',
            country: '',
            company:'',
            phone:'',
            fax:'',
            mobile:'',
            group:'',
            notes:''
          });
                grid.stopEditing();
                grid.bbar.addClass("toolbarclass");
                store.insert(0, p);
                //grid.startEditing(0, 7);
                p.set("name",name);
                p.set("email",email);
                p.set("country",country);
                p.set("company",company);
                p.set("phone",phone);
                p.set("fax",fax);
                p.set("mobile",mobile);
                p.dirty=true;
                p.id="new";
        }
        else
        {
         Ext.Msg.alert('Info','Drag and drop contact from list..',function(btn){});
        }
        }
    });
 //右键菜单
  var contextmenu = new Ext.menu.Menu({
        id: 'theContextMenu',
        items: [{
            text: 'Remove',
            handler: function(){
           // var cell=MyRecord.getSelectedCell();
           // debugger
           MyRecord=store.getAt(rid);
           if(MyRecord.id=="new")
           {
           Ext.Msg.confirm('','Are you sure you want to delete this record?',function(btn){if(btn=='yes'){store.remove(MyRecord);}});
           }
           else
           {
             var deleteemail=store.getAt(rid).data.email;
              Ext.Msg.confirm('','Are you sure you want to delete this record?',function(btn)
             {
               if(btn=='yes')
               {
                  var flag=Web_Memo.deleteRecord(deleteemail).value;
                 if(flag=="1")
                {Ext.Msg.alert('','Record deleted.',function(btn){ reload();});}
                 else
                {Ext.Msg.alert('','Action failed.  Please try again.',function(btn){});}
               }
             })
           }
            }
        }]
    });
    grid.on("rowcontextmenu", function(grid, rowIndex, e){
        e.preventDefault();
        // MyRecord=grid.getSelectionModel();
        //sm.selectFirstRow(rowIndex);
        //sm.getSelections();
        rid=rowIndex;
        contextmenu.showAt(e.getXY());
    });
    //grid.getView().mainBody.dom.style.width = grid.getView().getTotalWidth();
    //grid.getView().mainBody.dom.style.height = '1px';
    //grid.getSelectionModel().selectFirstRow();


//加载菜单
addtoolbar();

//结束
    } 
    )
   
    function showTree(groupid,groupname)
    {
     document.getElementById("ctl00_ContentPlaceHolder1_groupid").value=groupid;
     document.getElementById("ctl00_ContentPlaceHolder1_groupname").value=groupname;
     var win =mygroup.getActive();
     if(win!=null&&win!=undefined)
     {
     win.close();
     }
     newWinNew(groupid);  
    }
    //群组信息
     function newWinNew(groupid)
        {//debugger
       
        var groupname=document.getElementById("ctl00_ContentPlaceHolder1_groupname").value;
        win = new Ext.Window({title:groupname,
           width:260,
           height:530,
           maximizable:false,
           manager:mygroup,
           constrain:true,
           modal:false,
           autoLoad : {url:'GroupPersons.aspx',method:'GET',scripts :true}
         
         });
        win.show();
        }
    //加载群组树形结构
    function showgroup()
    {
     //grid.destroy() ;
    Ext.getDom("NameLabel").innerHTML=document.getElementById("ctl00_ContentPlaceHolder1_groupname").value;
    //debugger
      var dt =Web_Memo.ReturnGroupInfo(document.getElementById("ctl00_ContentPlaceHolder1_groupid").value).value;
      var selectnode;
      if(dt!=null&&dt!=undefined)
      {
        var tree = new Ext.tree.TreePanel({
        el:'tree',
        enableDrag:true,
        ddGroup: 'GridDD',
        hlColor : "#3333FF",
        hlDrop : true,
        baseCls:"x-plain",
        singleExpand :true,
        autoHeight:true
        });
       var root = new Ext.tree.TreeNode({text:document.getElementById("ctl00_ContentPlaceHolder1_groupname").innerHTML,leaf:false,icon:'../images/ren-3.png'});
       //debugger
       for(var i=0;i<=dt.Rows.length-1;i++)
        {
           var cardemail=dt.Rows[i].cardemail;
           var name = dt.Rows[i].name;
           var phone = dt.Rows[i].phone.replace(/-/g," ");
           var mobile = dt.Rows[i].mobile.replace(/-/g," ");
           var fax = dt.Rows[i].fax.replace(/-/g," ");
           var country=dt.Rows[i].country;
           var company=dt.Rows[i].companyname;
           var admin=dt.Rows[i].admin;
           var node1;
           if(admin==0)
           {
             node1= new Ext.tree.TreeNode({text:name,leaf:false,qtip:"User",icon:'../images/ren-2.png',value:'person'});
           }
           else if(admin==1)
           {
              node1= new Ext.tree.TreeNode({text:name,leaf:false,qtip:"Administrator",icon:'../images/ren-4.png',value:'person'});
           }
           else if(admin==2)
           {
              node1= new Ext.tree.TreeNode({text:name,leaf:false,qtip:"Creator",icon:'../images/ren-1.png',value:'person'});
           }
           var node2 =new Ext.tree.TreeNode({text:cardemail,leaf:true,icon:'../images/email.png',qtip:"email" });
           var node3 =new Ext.tree.TreeNode({text:phone,leaf:true,icon:'../images/phone(1).png',qtip:"phone"});
           var node4 =new Ext.tree.TreeNode({text:mobile,leaf:true,icon:'../images/mobile.png',qtip:"mobile"});
           var node5 =new Ext.tree.TreeNode({text:fax,leaf:true,icon:'../images/fax.png',qtip:"fax"});
           var node6 =new Ext.tree.TreeNode({text:company,leaf:true,icon:'../images/gongsi.png',qtip:"fax"});
           var node7 =new Ext.tree.TreeNode({text:country,leaf:true,icon:'../images/guojia.png',qtip:"fax"});
           node1.appendChild(node7);
           node1.appendChild(node6);
           node1.appendChild(node2);
           node1.appendChild(node3);
           node1.appendChild(node4);
           node1.appendChild(node5);
           root.appendChild(node1);
           //debugger
        }
        //debugger
         tree.setRootNode(root);
         tree.render();
         //grid.render();
         tree.root.expand(false,true);
         //reload();
    }
    }
    function inputInfo()
    {
    Ext.QuickTips.init();
     var winA =mygroup1.getActive();
     if(winA!=null&&winA!=undefined)
     {
     winA.close();
     }
  form = new Ext.form.FormPanel
    ({
    labelAlign:'right',
    labelWidth:50,
    frame:true,
    //defaultType:'textfield',
items: [{
            layout:'column',
            items: [{
                columnWidth:.5,
                layout: 'form',
                defaultType: 'textfield',
                items:[
                    {fieldLabel:'Name',name:'name',allowBlank:false,vtype:'alpha',maxLength:50},
                    {fieldLabel:'Email',name:'email',allowBlank:false,minLength:5,maxLength:50,vtype:'email'},
                    {fieldLabel:'Country',name:'country',xtype: 'combo',maxLength:20,width:129,
                store: new Ext.data.Store({
                proxy:new Ext.data.MemoryProxy(data),
                reader:new Ext.data.ArrayReader({},[
                {name:'value'},
                {name:'text'}
                ]),
                fields: ['value', 'text']
                }),
                triggerAction: 'all',
                valueField: 'value',
                displayField: 'text'
                    },
                    {fieldLabel:'Company',name:'company',vtype:'alpha',maxLength:30}
                      ]
            },
            {
                columnWidth:.5,
                layout: 'form',
                defaultType:'textfield',
                items:[
                    {fieldLabel:'Phone',name:'phone',maxLength:25},
                    {fieldLabel:'fax',name:'fax',maxLength:25},
                    {fieldLabel:'mobile',name:'mobile',maxLength:25},
                    {fieldLabel:'Groups',name:'groups',vtype:'alpha',maxLength:30}
                      ]
            }
            ]
        },
        {
                 width:317,
                 height:50,
                 fieldLabel:'Notes',
                 xtype:'textarea',
                 name:'notes',
                 maxLength:100
            }
        ]
    });
   
    var win = new Ext.Window({title:'Input your contact info',
    //el:'window-win',
    layout:'fit',
    width:400,
    height:250,
    closeAction:'close',
    manager:mygroup1,
    items:[form],
    buttons:[{text:'Save',handler:function(btn){
                var flag =form.getForm().isValid()
                {
                if(flag==true)
                {
                addnew();
                }
                else
                {
                return false;
                }
                }
    }
    },
    {text:'Cancel',handler:function(btn){win.close();}}]
    })
     win.show();
    }
function Groupby(groupbyvalue)
    {
    //document.getElementById("grid").style.display="none";
    grid.destroy() ;
    Ext.QuickTips.init();
    cm = new Ext.grid.ColumnModel([
        {header:'Name',dataIndex:'name',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank:false
        })),clicksToEdit:2},
        {header:'Email',dataIndex:'email',width:80,sortable:true},
        {header:'Country',dataIndex:'country',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Company',dataIndex:'company',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Phone',dataIndex:'phone',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Fax',dataIndex:'fax',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Mobile',dataIndex:'mobile',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
//         {header:'Address',dataIndex:'address',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
//            allowBlank: true
//        })),clicksToEdit:2},
         {header:'Group',dataIndex:'group',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Notes',dataIndex:'notes',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2}
    ]);
    //debugger
      store = new Ext.data.GroupingStore({
        //proxy: new Ext.data.HttpProxy({url:'MemoData.aspx'}),
        proxy: document.getElementById("ctl00_ContentPlaceHolder1_reflag").value==""?(new Ext.data.HttpProxy({url:'MemoData.aspx'})):(new Ext.data.HttpProxy({url:'MemoData.aspx?flag='+document.getElementById("ctl00_ContentPlaceHolder1_reflag").value})),
        reader: new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'
        }, [
            {name:'name'},
            {name:'email'},
            {name:'country'},
            {name:'company'},
            {name:'phone'},
            {name:'fax'},
            {name:'mobile'},
            //{name:'address'},
            {name:'group'},
            {name:'notes'}
           
        ]),
        groupField: groupbyvalue,
        sortInfo: {field: groupbyvalue, direction: "ASC"}
    });
    //debugger
     grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm:cm,
        view:new Ext.grid.GroupingView(),
       loadMask:true,
        autoHeight: true,
       stripeRows:true,
        renderTo: 'grid',
        //:true,
        //cm: cm1,
      viewConfig:{
       forceFit:true
       },
       //autoExpandColumn:'notes',
       bbar:new Ext.PagingToolbar(
       {
       pageSize:20,
       store:store,
       displayInfo:true,
       displayMsg:'Item{0} To {1},Total{2}',
       emptyMsg:"No Message"
       }
       )
    });
   store.load({params:{start:0,limit:20}});
   ddrow = new Ext.dd.DropTarget(grid.container, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data){
       //debugger
       //count = store.getCount();
        var node =data;
        if(node.node.attributes.value=='person')
        {
          var name = node.node.attributes.text;
          var country=node.node.childNodes[0].text;
          var company=node.node.childNodes[1].text;
          var email= node.node.childNodes[2].text;
          var phone= node.node.childNodes[3].text;
          var mobile= node.node.childNodes[4].text;
          var fax= node.node.childNodes[5].text;
          var p = new Record({
            name: '',
            email: '',
            country: '',
            company:'',
            phone:'',
            fax:'',
            mobile:'',
            group:'',
            notes:''
          });
                grid.stopEditing();
                store.insert(0, p);
                //grid.startEditing(0, 0);
                p.set("name",name);
                p.set("email",email);
                p.set("country",country);
                p.set("company",company);
                p.set("phone",phone);
                p.set("fax",fax);
                p.set("mobile",mobile);
                p.dirty=true;
                p.id="new";
               
        }
        else
        {
         Ext.Msg.alert('','Drag and drop contact from list.',function(btn){});
        }
        }
    });
 //右键菜单
 var contextmenu = new Ext.menu.Menu({
        id: 'theContextMenu',
        items: [{
            text: 'Remove',
            handler: function(){
           // var cell=MyRecord.getSelectedCell();
           // debugger
           MyRecord=store.getAt(rid);
           if(MyRecord.id=="new")
           {
           Ext.Msg.confirm('','Are you sure you want to delete this record?',function(btn){if(btn=='yes'){store.remove(MyRecord);}});
           }
           else
           {
             var deleteemail=store.getAt(rid).data.email;
              Ext.Msg.confirm('','Are you sure you want to delete this record?',function(btn)
             {
               if(btn=='yes')
               {
                  var flag=Web_Memo.deleteRecord(deleteemail).value;
                 if(flag=="1")
                {Ext.Msg.alert('','Record deleted.',function(btn){ reload();});}
                 else
                {Ext.Msg.alert('','Action failed.  Please try again.',function(btn){});}
               }
             })
           }
            }
        }]
    });
    grid.on("rowcontextmenu", function(grid, rowIndex, e){
        e.preventDefault();
        // MyRecord=grid.getSelectionModel();
        //sm.selectFirstRow(rowIndex);
        //sm.getSelections();
        rid=rowIndex;
        contextmenu.showAt(e.getXY());
    });
    }
    function reload()
    {
    grid.destroy() ;
 cm = new Ext.grid.ColumnModel([
        {header:'Name',dataIndex:'name',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank:false
        })),clicksToEdit:2},
        {header:'Email',dataIndex:'email',width:80,sortable:true},
        {header:'Country',dataIndex:'country',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Company',dataIndex:'company',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Phone',dataIndex:'phone',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Fax',dataIndex:'fax',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Mobile',dataIndex:'mobile',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
//         {header:'Address',dataIndex:'address',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
//            allowBlank: true
//        })),clicksToEdit:2},
         {header:'Group',dataIndex:'group',width:80,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2},
        {header:'Notes',dataIndex:'notes',width:80,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
            allowBlank: true
        })),clicksToEdit:2}
    ]);
 
  //debugger
    store = new Ext.data.Store({
        proxy: document.getElementById("ctl00_ContentPlaceHolder1_reflag").value==""?(new Ext.data.HttpProxy({url:'MemoData.aspx'})):(new Ext.data.HttpProxy({url:'MemoData.aspx?flag='+document.getElementById("ctl00_ContentPlaceHolder1_reflag").value})),
        reader: new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'
        }, [
            {name:'name'},
            {name:'email'},
            {name:'country'},
            {name:'company'},
            {name:'phone'},
            {name:'fax'},
            {name:'mobile'},
            //{name:'address'},
            {name:'group'},
            {name:'notes'}
           
        ])
    });
    //
     grid = new Ext.grid.EditorGridPanel({
        loadMask:true,
        autoHeight: true,
        stripeRows:true,
        renderTo: 'grid',
        //enableDragDrop:true,
        store: store,
        cm: cm,
       viewConfig:{
       forceFit:true
       },
       autoExpandColumn:'notes',
       bbar:new Ext.PagingToolbar(
       {
       pageSize:20,
       store:store,
       displayInfo:true,
       displayMsg:'Item{0} To {1},Total{2}',
       emptyMsg:"No Message"
       }
       )
    });
    store.load({params:{start:0,limit:20}});
   ddrow = new Ext.dd.DropTarget(grid.container, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data){
       //debugger
        //count = store.getCount();
        var node =data;
        if(node.node.attributes.value=='person')
        {
          var name = node.node.attributes.text;
          var country=node.node.childNodes[0].text;
          var company=node.node.childNodes[1].text;
          var email= node.node.childNodes[2].text;
          var phone= node.node.childNodes[3].text;
          var mobile= node.node.childNodes[4].text;
          var fax= node.node.childNodes[5].text;
          var p = new Record({
            name: '',
            email: '',
            country: '',
            company:'',
            phone:'',
            fax:'',
            mobile:'',
            group:'',
            notes:''
          });
                grid.stopEditing();
                store.insert(0, p);
                //grid.startEditing(0, 0);
                p.set("name",name);
                p.set("email",email);
                p.set("country",country);
                p.set("company",company);
                p.set("phone",phone);
                p.set("fax",fax);
                p.set("mobile",mobile);
                p.dirty=true;
                p.id="new";
        }
        else
        {
         Ext.Msg.alert('','Drag and drop contact from list..',function(btn){});
        }
        }
    });
 //右键菜单
 var contextmenu = new Ext.menu.Menu({
        id: 'theContextMenu',
        items: [{
            text: 'Remove',
            handler: function(){
           // var cell=MyRecord.getSelectedCell();
           // debugger
           MyRecord=store.getAt(rid);
           if(MyRecord.id=="new")
           {
           Ext.Msg.confirm('','Are you sure you want to delete this record?',function(btn){if(btn=='yes'){store.remove(MyRecord);}});
           }
           else
           {
             var deleteemail=store.getAt(rid).data.email;
              Ext.Msg.confirm('','Are you sure you want to delete this record?',function(btn)
             {
               if(btn=='yes')
               {
                  var flag=Web_Memo.deleteRecord(deleteemail).value;
                 if(flag=="1")
                {Ext.Msg.alert('','Record deleted.',function(btn){ reload();});}
                 else
                {Ext.Msg.alert('','Action failed.  Please try again.',function(btn){});}
               }
             })
           }
            }
        }]
    });
    grid.on("rowcontextmenu", function(grid, rowIndex, e){
        e.preventDefault();
        rid=rowIndex;
        contextmenu.showAt(e.getXY());
    });
    //grid.render();
    }
    function addnew()
    {
    //debugger
     var name = form.getForm().findField('name').getValue();
     var email = form.getForm().findField('email').getValue();
     var country = form.getForm().findField('country').getValue();
     var company = form.getForm().findField('company').getValue();
     var phone = form.getForm().findField('phone').getValue();
     var fax = form.getForm().findField('fax').getValue();
     var mobile = form.getForm().findField('mobile').getValue();
     var groups = form.getForm().findField('groups').getValue();
     var notes = form.getForm().findField('notes').getValue();
     if(email!=""&& email.length>=5)
    { var flag=Web_Memo.InsertPerson(name,email,country,company,phone,fax,mobile,groups,notes).value;
     if(flag=="1")
     {
       Ext.MessageBox.alert('','Information saved.',function(btn){mygroup1.getActive().close();reload();})
     }
     else
     {
      Ext.MessageBox.alert('','Action failed.  Please try again.',function(btn){})
     }
     }
     else
     {
      Ext.MessageBox.alert('','The length of e-mail can not be less than 5',function(btn){})
     }
    }
    function SaveUpdates()
    {
        var m = store.modified.slice(0);
                var jsonArray = [];
                var info=new Array();
                Ext.each(m, function(item) {
                    jsonArray.push(item.data);
                    //debugger
           });
           for(var i=0;i<jsonArray.length;i++)
           {
             info[i]=jsonArray[i].name+" &"+jsonArray[i].email+" &"+jsonArray[i].country+" &"+jsonArray[i].company+" &"+jsonArray[i].phone+" &"+jsonArray[i].fax+" &"+jsonArray[i].mobile+" &"+jsonArray[i].group+" &"+jsonArray[i].notes;
             //debugger
           }
       if(info.length!=0)
        {
        var flag=Web_Memo.UpdatePerson(info).value;
        if(flag=='1')
        {
           Ext.MessageBox.alert('','Information saved.',function(btn){});
        }
        else
        {
           Ext.MessageBox.alert('','The operation failed because the service is unavailable or you may have attempted to input data containing the character /"&/". Please try again',function(btn){});
        }
        }
          
    }
    function UploadExcel()
    {
    uploadform = new Ext.form.FormPanel({
    labelAlign:'right',
    labelwidth:25,
    frame:true,
    fileUpload:true,
    width:280,
    items:
    [{
    xtype: 'textfield',//表单域类型
    fieldLabel:'Excel',    
    id: 'form-file',
    emptyText: 'Select your Excel worksheet',
    name:'file',
    inputType:'file'
    }]
    });
   
   var win = new Ext.Window({title:'Upload Excel',
    //el:'window-win',
    layout:'fit',
    width:330,
    height:100,
    closeAction:'close',
    modal:true,
    manager:mygroup2,
    items:[uploadform],
    buttons:[{text:'Save',handler:function(btn){saveexcel()}},{text:'Cancel',handler:function(btn){win.close();}}]
    })
     win.show();
   }
   function saveexcel()
   {
   if(uploadform.getForm().isValid())
     {
      uploadform.getForm().submit({
      url: 'upload.aspx',     //后台处理页面
      waitMsg: 'loading...',
      success: function(fp, o){Ext.MessageBox.alert('','Uploaded.',function(btn){ 
      var winA =mygroup2.getActive();
      if(winA!=null&&winA!=undefined)
       {
     winA.close();
       }
       reload();
     });
     },
      failure: function(fp, o){Ext.MessageBox.alert('','The operation failed because the service is unavailable or you may have attempted to input data containing the character /" &/ " or /" , /" or /" /' /".Please try again',function(btn){});}
      });
      }
   }
   function clickExcel()
   {
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton8").onClick="LinkButton8_Click";
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton8").click();
   }
   function SubmitKeyClick(button)
    {   
        if (event.keyCode == 13)
        {       
            event.keyCode=9;
            event.returnValue = false;
            document.all[button].click();
        }
    }
   
   function Tolistview()
   {
    //menumouseclick(td_1,2,'Mouseovers5','Mouseouts5','');
    var flag= document.getElementById("ctl00_ContentPlaceHolder1_reflag").value;
    if(flag=="")
    {window.location="N_CardInfoList.aspx";}
    else
    {window.location="N_CardInfoList.aspx?flag="+flag;}
   }
  
   function Tocardview()
   { 
    var flag= document.getElementById("ctl00_ContentPlaceHolder1_reflag").value;
    if(flag=="")
    {window.location="N_CardInfoViewList.aspx";}
    else
    {window.location="N_CardInfoViewList.aspx?flag="+flag;}
   }
  
   function addConnection()
   {
     window.location="MyCardsInfo3.aspx";
   }
  
  function addtoolbar()
   {
   var groups = Web_Memo.GetContactGroups().value;
   mytb.destroy();
   mytb1.destroy();
    mytb= new Ext.Toolbar();
   mytb.render('toolbar');
    mytb1= new Ext.Toolbar();
   mytb1.render('toolbar1');
  var menu1=new Ext.menu.Menu(
  {
  items:[
  new Ext.menu.CheckItem({
  text:'Name',
  checked:true,
  group:'group11',
  handler:function(item,checked)
  {
  sort('name');
  }
  }),
  new Ext.menu.CheckItem({
  text:'Email',
  checked:false,
  group:'group11',
  handler:function(item,checked)
  {
  sort('cardemail');
  }
  }),
  new Ext.menu.CheckItem({
  text:'Company',
  checked:false,
  group:'group11',
  handler:function(item,checked)
  {
  sort('companyname');
  }
  }),
  new Ext.menu.CheckItem({
  text:'Country',
  checked:false,
  group:'group11',
  handler:function(item,checked)
  {
  sort('country');
  }
  }),
   new Ext.menu.CheckItem({
  text:'Group',
  checked:false,
  group:'group11',
  handler:function(item,checked)
  {
  sort('Groups');
  }
  }),
  new Ext.menu.CheckItem({
  text:'Connect To',
  checked:false,
  group:'group11',
  handler:function(item,checked)
  {
  sort('Email1');
  }
  })

  ]
  });
  mytb.add({
  text:'Sort by',
  menu:menu1
  })
  var menu5 = new Ext.menu.Menu();
  for(var i=0;i<groups.Rows.length;i++)
  {
  menu5.add(
  new Ext.menu.CheckItem({
  text:groups.Rows[i].Groups+" ( "+groups.Rows[i].Count+" )",
  value:groups.Rows[i].Groups,
  checked:false,
  group:'group15',
  handler:function(item,checked)
  {
   if(document.getElementById("ctl00_ContentPlaceHolder1_selectcount").innerHTML=='0')
  {
  alert("Please select contacts for group");
  }
  else
  {
  window.document.getElementById("ctl00_ContentPlaceHolder1_groupbyvalue").value=item.value;
  Groupby1();
  }
  }
  })
  )
  }
  //
  var sysgroup="Friends;Family;Co-workers;Do not list;Others";
  var sysgroups=sysgroup.split(";");
  for(var j=0;j<5;j++)
  { var p=0;
    for(var i=0;i<groups.Rows.length;i++)
   {
    if(groups.Rows[i].Groups==sysgroups[j])
     {
       break;
     }
     else
     {
       p++;
     }
   }
  if(p==groups.Rows.length)
  {
  menu5.add(
  new Ext.menu.CheckItem({
  text:sysgroups[j]+" ( 0 )",
  value:sysgroups[j],
  checked:false,
  group:'group15',
  handler:function(item,checked)
  {
   if(document.getElementById("ctl00_ContentPlaceHolder1_selectcount").innerHTML=='0')
  {
  alert("Please select contacts for group");
  }
  else
  {
  window.document.getElementById("ctl00_ContentPlaceHolder1_groupbyvalue").value=item.value;
  Groupby1();
  }
  }
  })
  )
  }
  }
 
  //
  var menus= new Array();
  for(var i=0;i<groups.Rows.length;i++)
  {
    var menun = new Ext.menu.Menu();
    menun.add(
  new Ext.menu.CheckItem({
  text:"<tr><td align=/"left/" colspan=/"2/">This contacts in this group <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Will be moved to /"Others/"<br/><td></tr><tr><td style=/"font-size:10px;/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=/"font-size:10px;/" οnclick=/"RemoveGroups('"+groups.Rows[i].Groups+"')/">Delete &nbsp;</span></td><td>&nbsp;<span style=/"font-size:10px;/">Cancel</span>&nbsp;</td></tr>",
  checked:false,
  group:'group17',
  handler:function(item,checked)
  { 
 
  }
    })
    );
  menus[i]=menun;
  }
  //
  var menu6 = new Ext.menu.Menu();
  for(var i=0;i<groups.Rows.length;i++)
  {if(groups.Rows[i].Groups!="Others")
  {
  menu6.add(
  new Ext.menu.CheckItem({
  text:groups.Rows[i].Groups+" ( "+groups.Rows[i].Count+" )",
  checked:false,
  group:'group16',
  menu:menus[i],
  handler:function(item,checked)
  { 
 
  //window.document.getElementById("ctl00_ContentPlaceHolder1_groupbyvalue").value=item.text;
  //deleteCategory();
  }
  })
  )
  }
  else
  {
  if(groups.Rows.length==1)
  {
   menu6.add(
  new Ext.menu.CheckItem({
  text:'<span style="color:Gray;font-style:italic;">No Group.</span>',
  checked:false,
  group:'group16',
  handler:function(item,checked)
  {
  }
  })
  )
  }
  }
  }
  //
  var menu4=new Ext.menu.Menu(
  {
  items:[
  new Ext.menu.CheckItem({
  text:'Add Group',
  checked:true,
  group:'group14',
  handler:function(item,checked)
  {
  if(document.getElementById("ctl00_ContentPlaceHolder1_selectcount").innerHTML=='0')
  {
  alert("Please select contacts for group");
  }
  else
  {
  Ext.MessageBox.prompt('Add Group','Please enter group name.',function(btn,text)
  {
  if(btn=="ok")
  {
  if(text!=""&&text!=undefined)
  {
  window.document.getElementById("ctl00_ContentPlaceHolder1_groupbyvalue").value=text;
  Groupby1();
  }
  else
  {
  alert('You must input groupname');
  }
  }
  }
  )
  }
  }
  }),
  new Ext.menu.CheckItem({
  text:'My Group',
  checked:false,
  group:'group14',
  menu:menu5,
  handler:function(item,checked)
  {
  }
  }),
  new Ext.menu.CheckItem({
  text:'Remove Group',
  checked:false,
  group:'group14',
  menu:menu6,
  handler:function(item,checked)
  {
//  var deflag =window.confirm("Are you sure delete the Categorys?");
//  if(deflag==true)
//  {
//   window.document.getElementById("ctl00_ContentPlaceHolder1_groupbyvalue").value='Others';
//   Groupby();
//  }
  }
  })
  ]
  });
 
 
  var menu2=new Ext.menu.Menu(
  {
 items:[
//  new Ext.menu.CheckItem({
//  text:'Display',
//  checked:true,
//  group:'group2',
//  handler:function(item,checked)
//  {
//  filter();
//  }
//  }),
  new Ext.menu.CheckItem({
  text:'Delete',
  checked:false,
  group:'group12',
  handler:function(item,checked)
  {
  if(document.getElementById("ctl00_ContentPlaceHolder1_selectcount").innerHTML=='0')
  {
  alert("Please select contacts to delete.");
  }
  else
  {
  Delete();
  }
  }
  }),
  new Ext.menu.CheckItem({
  text:'Group',
  menu:menu4,
  checked:false,
  group:'group12',
  handler:function(item,checked)
  {}
  })
 ]
  });
  mytb1.add({
  text:'Actions',
  menu:menu2
  })
   }
   //全选
   function selectall()
    {
     var check = document.getElementById("ctl00_ContentPlaceHolder1_checkall").checked;
     var checkboxlist = document.getElementById("ctl00_ContentPlaceHolder1_CheckBoxlist1");
     if(checkboxlist!=null&&checkboxlist!=undefined)
     {
       var checkboxes = checkboxlist.getElementsByTagName("input");
      if(checkboxes!=null&&checkboxes!=undefined)
      {
       for(var i=0;i<checkboxes.length;i++)
        {
         var mycheckbox = checkboxes[i];
         mycheckbox.checked =check;
        }
      }
     }
     sumcount();
    }
   
     function sumcount()
    {
  
    var count =0;
    var checkboxlist = document.getElementById("ctl00_ContentPlaceHolder1_CheckBoxlist1");
     if(checkboxlist!=null&&checkboxlist!=undefined)
     {
       var checkboxes = checkboxlist.getElementsByTagName("input");
      if(checkboxes!=null&&checkboxes!=undefined)
      {
       for(var i=0;i<checkboxes.length;i++)
        {
         var mycheckbox = checkboxes[i];
         if(mycheckbox.checked ==true)
         {
          count=count+1;
         }
        }
      }
     }
    document.getElementById("ctl00_ContentPlaceHolder1_selectcount").innerHTML=count;
    }
   
    //排序
   function sort(message)
   {
      window.document.getElementById("ctl00_ContentPlaceHolder1_LinkButton3").onCommand="LinkButton3_Command";
      window.document.getElementById("ctl00_ContentPlaceHolder1_sortbyvalue").value=message;
      window.document.getElementById("ctl00_ContentPlaceHolder1_LinkButton3").click();
   }
   function image(img)
   {
   var image= img='../TempFile/'?'../images/renlogo1.jpg':img;
   return img;
   }
   function front()
   {
   window.document.getElementById("ctl00_ContentPlaceHolder1_front").click();
   }
   function Next()
   {
   window.document.getElementById("ctl00_ContentPlaceHolder1_after").click();
   }
   function RemoveGroups(groupname)
   {
     window.document.getElementById("ctl00_ContentPlaceHolder1_groupbyvalue").value=groupname;
     deleteCategory();
   }
  
   function Groupby1()
   {
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton4").onClick="LinkButton4_Click";
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton4").click();
   }
   function deleteCategory()
   {
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton5").onClick="LinkButton5_Click";
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton5").click();
   }
  
    function Delete()
   {
   var dflag =window.confirm("Are you sure you want to delete the contacts?");
   if(dflag==true)
   {
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton1").onClick="LinkButton1_Click";
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton1").click();
   }
   else
   {
   return;
   }
   }
  
    function filter()
   {
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton2").onClick="LinkButton2_Click";
   document.getElementById("ctl00_ContentPlaceHolder1_LinkButton2").click();
  
   }

Milanpiaoxiang
关注
专栏目录
Ext实现的拖拽树和表格之间的拖拽
03-27
Ext实现的拖拽树和表格之间的拖拽，网站下MyTest目录中的文件都可以运行，但是需要下载一个Ext3.0的包放在网站的根目录下面
下拉列表的二级联动（ExtJs）
nerveboy学习笔记
03-08 1726
//下面的方法是创建一个下拉列表的二级联动组件，并扔到原先的面板中expansion : function(cfg){ var typeCombStore = new Ext.data.JsonStore({     //一级列表数据 fields : ['value', 'text'], data : [{ 'value' : 1, 'text' : '一类...
EXTJS 4 树形表格组件使用示例
09-30
extjs树型表格组件的使用示例,详细说明可以参见http://blog.csdn.net/snail_spoor/article/details/39698037
js实现节点可拖动的树
05-31
js实现节点可拖动的树! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
extjs 扩展树，带复选框，能联动
一个梦
07-01 132
[img]/upload/attachment/120757/da1741c1-19ff-3cf9-91f3-3a0afc697431.png[/img] 功能说明：1 菜单为后台读取数据，异步加载生成。 2 菜单后边的功能列表为读取数据库生成。 3 当选中菜单时候可以级联选中 其后边的所有功能。 4 当选中功能时候，若功能对应的菜单未选中，则自动选中菜单。 5 非叶子节点也可以设置显示...
自定义ExtJS控件之下拉树和下拉表格附
10-26
然而，当需要实现更加复杂的用户交互时，例如在选择数据时拥有类似树形结构的下拉或者表格形式的下拉时，单纯使用官方提供的下拉列表控件就显得力不从心了。因此，我们需要学会如何自定义控件，满足实际业务中的需求...
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free 和 pay 三个属性，且这三个都是数组格式。）：   渲染出一个这样子的 表格 ： res ...
GWT-EXT+IBATIS+SQL实现表格，树，面板
01-24
例子包括对GWT-EXT的对表格，树，面板操作。对与IBATIS数据结合使用。包括客户端与服务器端，此例子在netbeans6.5下面可以正常运行 整个工程文件太大，这里只能上传源代码，如果需要整个工程的可以发邮件给我 ...
asp+ext js节点树控件解决了图标问题和按钮问题
04-09
"asp+ext js节点树控件解决了图标问题和按钮问题"这个案例，主要展示了如何利用Ext JS库与ASP.NET技术结合，创建一个具有图标和按钮功能的节点树控件。下面我们将深入探讨这一主题。 首先，Ext JS是一个强大的...
ext前台关于树和表格数据之间动态转换
我叫周希望的博客
09-23 555
前台创建ext树（ext.TREEPANEL）,前台ext表格与树之间的动态切换
Ext用户扩展控件-----树形表格
05-23
Ext的扩展控件，树形表格。！！！！ Ext的扩展控件，树形表格。！！！！
基于Vue实现可以拖拽的树形表格
08-10
基于Vue实现可以拖拽的树形表格
ext页面显示行数选择与主子表显示
08-17
主子表联动时子表需要获取主表的ID，在分页时需要提供ID，扩展EXT实现之，提供选择页面显示行数。
Ext4.2：树节点数据向表格拖拽
u011605971的专栏
04-20 1393
直接使用Ext的插件直接连节点都拖过去了，下面的实现是我在项目中需要用到的，也就是节点的数据过去了
Extjs的页面布局及树节点的联动
qq_45398309的博客
01-02 400
最近在公司接触到了Extjs这个框架，学的真是头发稀脑袋大呀！下面带来在学习中自己写的一个实例。 此例子是用6的版本所写。大家参考的时候注意哦！因为Extjs版本之间的个别方法属性有着细微差别。 Extjs 在这之前简短说一下这个框架的优缺点吧。 优点：相关js封装的很好，界面很简洁，对于兴起的那一段时间来说美观程度也是很好的。多数用于系统管理系统 缺点：页面加载过慢，重量级框架（底层你会发现...
ajax写级联效果，动态从数据库获取数据
sunping177的专栏
09-08 3585
要实现的级联数据的效果是，咨询方式有多种，有的有子咨询方式，有的没有，直接上图图一中选择自选方式，例如：选择面询，效果如图二，后面对应的有面询的子咨询方式，有的没有子咨询方式，如图三，没有子咨询方式，后面不显示 图一
ext grid 子表格
weixin_30337251的博客
09-22 124
Ext.define('app.view.main.biz.customer.receipt.followup.FollowUpActionPanel', { extend: 'Ext.grid.Panel', border: false, margin:'10 20 20 20', hideHeaders: true, columns: [{...
ExtJS4.2学习(15)树形表格（转）
weixin_34335458的博客
11-22 302
鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html ------------------------------------------------------------------------------------------- 以下是完整代码： /** *...
zTree 插件与bootstrap-table 实现树与列表联动
weixin_30389003的博客
03-19 848
实现效果： 界面代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="content-type" content="text/html; charse...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值