Ext のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Ext へ行く。
- 1 (2008-06-25 (水) 18:52:24)
- 2 (2009-05-11 (月) 18:12:27)

Ext

Ext
- TIPS
- TODO
  - DataView

<link rel="stylesheet" type="text/css" href="../../resources/css/ytheme-aero.css" />

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/prototype/effects.js"></script>
<script type="text/javascript" src="../../adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="../../adapter/prototype/scriptaculous.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="xml-grid.js"></script>
</head>
<body>
<div id="example-grid" style="width:520px;height:300px;"></div>
<div id="msg" style="visibility: hidden"></div> 

<input type="button" id="okButton" value="OK" />
<div id="test1"></div>


<div id="outdata"></div>
<div id="outdata2"></div>
</body>
</html>

test.js

var GridShow={
 dataurl : 'test.json',
 gridobj : '',
 init : function(){
   // create the Data Store
   var RecordDef = Ext.data.Record.create([
      {name: 'id'},
      {name: 'name'},
      {name: 'occupation'},
   ]);

   var ds = new Ext.data.Store({
       // load using HTTP
       proxy: new Ext.data.HttpProxy({url: this.dataurl}),

       // the return will be JSON so lets set up a reader
       reader: new Ext.data.JsonReader({
         totalProperty: "results",
         root: "rows",
         id: "id"
       }, RecordDef)
   });

   var cm = new Ext.grid.ColumnModel([
		{header: "Id", width: 180, dataIndex: 'id'},
		{header: "Name", width: 200, dataIndex: 'name'},
		{header: "Occupation", width: 140, dataIndex: 'occupation'}
	]);
   cm.defaultSortable = true;

   // create the grid
   this.gridobj = new Ext.grid.Grid('example-grid', {
       ds: ds,
       cm: cm
   });
   this.gridobj.render();
   ds.load();
 }
}

Ext.onReady(GridShow.init,GridShow,true);


var MessageShow={

 init : function(){



   Ext.get('okButton').on('click', function(){
	Ext.get('test1').dom.innerHTML = Ext.get('name').dom.value;
   });
 }
}

Ext.onReady(MessageShow.init,MessageShow,true);

var AnotherShow={

 init : function(){

   Ext.get('betuButton').on('click', function(){
	GridShow.dataurl = 'test3.json';
	Ext.onReady(GridShow.init,GridShow,true);
   });
 }
}

Ext.onReady(AnotherShow.init,AnotherShow,true);

var OutShow={

 init : function(){

   Ext.get('outButton').on('click', function(){



   		for (i=0;i<GridShow.gridobj.getDataSource().getCount();i++) {
   			Ext.get('outdata').dom.innerHTML = Ext.get('outdata').dom.innerHTML + '<br />'+ GridShow.gridobj.getDataSource().getAt(i).get("name");
   			GridShow.gridobj.getDataSource().getAt(i).set("name",GridShow.gridobj.getDataSource().getAt(i).get("name") + i);

   			GridShow.gridobj.getDataSource().getAt(i).commit();
   		}


   		GridShow.gridobj.getDataSource().add(addRecord);
   });
 }
}

Ext.onReady(OutShow.init,OutShow,true);

  { 'results': 2, 
    'rows': [
      { 'id': 1, 'name': 'hoge1', occupation: 'hoge1' },

    ]
  }

test3.json

  { 'results': 6, 
    'rows': [






    ]
  }

↑

TIPS

↑

API

Ext.onRead

↑

FireFox?

  { 'results': 2, 
    'rows': [


    ]
  }

↑

HttpProxy?

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
  url: 'http://www.yui-ext.com/forum2/topics-remote.php'
}),

HttpProxy?

↑

BLANK_IMAGE_URL

Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";

↑

MessageBox?

↑

<script type="text/javascript" src="javascripts/ext/adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="javascripts/ext/adapter/prototype/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="javascripts/ext/ext-all.js"></script>
<script type="text/javascript" src="javascripts/ext/source/locale/ext-lang-ja.js"></script>

↑

TODO

↑

DataView?

http://extjs.com/deploy/dev/examples/form/custom.html

↑

Tutorial: Introduction to Ext
http://www.vedovelli.com.br/?m=200704

SoftwareDesign
IDEs, plugins and tools for Ext JS 2.0

ExtJapan
Tutorial:Introduction to Ext 2.0 (Japanese)
Ext 2.0 Tutorials

↑

#comment