aula 26

loiane · Jun 25, 2012 · 6143db2 · 6143db2
1 parent 4a81fc5
commit 6143db2
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 0 deletions.
diff --git a/aula26/app.css b/aula26/app.css
@@ -0,0 +1,7 @@
+body {
+	padding: 30px;
+}
+
+p {
+	margin-bottom: 15px;
+}
diff --git a/aula26/app.js b/aula26/app.js
@@ -0,0 +1,87 @@
+Ext.onReady(function(){
+
+	Ext.create('Ext.panel.Panel', {
+		title: 'Meu primeiro Panel',
+		width: 300,
+		height: 100,
+		html: '<p>Meu primeiro Panel. Isso aqui é o corpo do Panel.</p>',
+		renderTo: 'panel1'
+	});
+
+
+	//-----Exemplo 2---------//
+
+	Ext.create('Ext.data.Store', {
+	    storeId:'simpsonsStore',
+	    fields:['name', 'email', 'phone'],
+	    data:{'items':[
+	        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
+	        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
+	        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
+	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
+	    ]},
+	    proxy: {
+	        type: 'memory',
+	        reader: {
+	            type: 'json',
+	            root: 'items'
+	        }
+	    }
+	});
+
+	var grid = Ext.create('Ext.grid.Panel', {
+	    title: 'Simpsons',
+	    store: Ext.data.StoreManager.lookup('simpsonsStore'),
+	    columns: [
+	        { header: 'Name',  dataIndex: 'name' },
+	        { header: 'Email', dataIndex: 'email', flex: 1 },
+	        { header: 'Phone', dataIndex: 'phone' }
+	    ],
+	    height: 200,
+	    width: 400
+	});
+
+
+	var panel = Ext.create('Ext.panel.Panel', {
+		title: 'Meu primeiro Panel',
+		width: 500,
+		height: 600,
+		items: [
+			{
+		        xtype: 'displayfield',
+		        fieldLabel: 'Nome',
+		        name: 'nome',
+		        value: 'Loiane Groner'
+		    }, 
+		    grid
+		],
+		renderTo: 'panel2'
+	});
+
+	var store = Ext.create('Ext.data.TreeStore', {
+	    root: {
+	        expanded: true,
+	        children: [
+	            { text: "detention", leaf: true },
+	            { text: "homework", expanded: true, children: [
+	                { text: "book report", leaf: true },
+	                { text: "alegrbra", leaf: true}
+	            ] },
+	            { text: "buy lottery tickets", leaf: true }
+	        ]
+	    }
+	});
+
+	var tree = Ext.create('Ext.tree.Panel', {
+	    title: 'Simple Tree',
+	    width: 200,
+	    height: 150,
+	    store: store,
+	    rootVisible: false
+	});
+
+	panel.add(tree);
+
+	panel.remove(grid);
+
+});
diff --git a/aula26/index.html b/aula26/index.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+
+	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
+	<script type="text/javascript" src="../extjs/ext-all.js"></script>
+
+	<link rel="stylesheet" type="text/css" href="app.css">
+	<script type="text/javascript" src="app.js"></script>
+</head>
+<body>
+	<p><div id="panel1"></div></p>
+	<p><div id="panel2"></div></p>
+</body>
+</html>