Gooday Note Scrap Source Android login
 
작성일 : 10-05-19 09:35
그리드 drag & drop
 글쓴이 : kang (124.♡.25.162)
조회 : 1,579  
   http://extjs.wima.co.uk/example/9 [612]
// reference local blank image
Ext.BLANK_IMAGE_URL = '/extjs/lib/resources/images/default/s.gif';
 
// create namespace
Ext.namespace('Test');
 
// create application
Test.app = function() {
  // do NOT access DOM from here; elements don't exist yet
 
  // private variables
  var Grid1Store = new Ext.data.JsonStore({
    root: 'users',
    fields: [ 'id', 'name', 'email' ],
    autoLoad: true,
    data: { users: [
      { "id": 1, "name":"John Smith", "email":"jsmith@example.com"},
      { "id": 2, "name":"Anna Smith", "email":"asmith@example.com"},
      { "id": 3, "name":"Peter Smith", "email":"psmith@example.com"},
      { "id": 4, "name":"Tom Smith", "email":"tsmith@example.com"},
      { "id": 5, "name":"Andy Smith", "email":"asmith@example.com"},
      { "id": 6, "name":"Nick Smith", "email":"nsmith@example.com"}
    ]}
  });
 
  var Grid2Store = new Ext.data.JsonStore({
    root: 'ddi',
    fields: [ 'e164', 'local' ],
    autoLoad: true,
    data: { ddi: [
      { e164: '442088442235', local: '02088442235' },
      { e164: '442084452718', local: '02084452718' },
      { e164: '442084452719', local: '02084452719' },
      { e164: '442084452728', local: '02084452728' }
    ]}
  });
 
  // private functions
 
  // public space
  return {
    // public properties, e.g. strings to translate
   
    // public methods
    init: function() {
   
    var Grid2Panel = new Ext.grid.GridPanel({
      title: 'Source',
      width: 200,
      renderTo: 'grid2',
      store: Grid2Store,
      enableDragDrop: true,
      ddGroup: 'users',
      enableColumnHide: false,
      enableColumnMove: false,
      columns: [
        {
          header: 'Number',
          dataIndex: 'local',
          sortable: true
        }
      ]
    });
   
    var Grid1Grid = new Ext.grid.GridPanel({
      store: Grid1Store,
      renderTo: 'grid1',
      title: 'Target',
      width: 300,
      enableDragDrop: true,
      enableColumnHide: false,
      enableColumnMove: false,
      columns: [
          {
            id: 'name',
            header: "Name",
            sortable: true,
            dataIndex: 'name'
          },{
            id: 'email',
            header: "Email",
            sortable: true,
            dataIndex: 'email'
          }
        ],
      autoExpandColumn: 'email',
      border: true,
      listeners: {
        /* Drop zone */
        render: function(grid){
          var target = new Ext.dd.DropTarget(grid.getView().mainBody,{
            ddGroup: 'users',
            copy: false,
            notifyDrop: function(dragSource, event, data){
             
              var dropRowIndex = dragSource.getDragData(event).rowIndex;
              var user = Grid1Store.getAt(dropRowIndex);
              var ddis = data.selections;
             
              var ddis_list = '';
             
              for(i=0; i < ddis.length; i++)
              {
                var ddi = ddis[i];
                var e164 = ddi.data.e164;
                ddis_list = ddis_list + e164 + ',';
              }
             
              Ext.Msg.alert('Drop',ddis_list + ' dropped on ' + user.data.name);
            }
          });
        }
      }
    });
   
    } // end of init
  };
}(); // end of app
 
Ext.onReady(Test.app.init, Test.app);