Initial commit

parents
Showing with 2132 additions and 0 deletions

Too many changes to show.

To preserve performance only 1000 of 1000+ files are displayed.

Ext.onReady(function(){
//alert("We’re ready to go!");
Ext.Msg.alert("Alert","We’re ready to go!");
Ext.Msg.confirm("Confirm","Do you like Ext JS?",function(btn){
if(btn === "yes"){
Ext.Msg.alert("Great!","This is great!");
}else{
Ext.Msg.alert("Really?","That's too bad.");
}
});
});
No preview for this file type
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>architect</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
\ No newline at end of file
/*
* File: app.js
*
* This file was generated by Sencha Architect version 2.0.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'MyViewport'
],
autoCreateViewport: true,
name: 'MyApp'
});
/*
* File: app/view/MyViewport.js
*
* This file was generated by Sencha Architect version 2.0.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'fit'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'General',
items: [
{
xtype: 'form',
border: 0,
bodyPadding: 10,
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Last name',
anchor: '100%'
},
{
xtype: 'datefield',
fieldLabel: 'Birthdate ',
anchor: '100%'
},
{
xtype: 'textareafield',
fieldLabel: 'Comments',
anchor: '100%'
}
]
}
]
},
{
xtype: 'panel',
title: 'Groups'
},
{
xtype: 'panel',
title: 'Contacts'
}
]
}
]
});
me.callParent(arguments);
}
});
\ No newline at end of file
/*
* File: app/view/Viewport.js
*
* This file was generated by Sencha Architect version 2.0.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('MyApp.view.Viewport', {
extend: 'MyApp.view.MyViewport',
renderTo: Ext.getBody(),
requires: [
'MyApp.view.MyViewport'
]
});
\ No newline at end of file
{
"name": "architect",
"settings": {
"urlPrefix": "http://localhost/learning-ext-4/01-basics/architect/",
"spacesToIndent": 4,
"codeGenFormat": "Class",
"exportPath": "",
"extPath": "http://extjs.cachefly.net/ext-4.0.7-commercial/",
"senchaIoKey": "",
"senchaIoPath": "http://extjs.cachefly.net/designer/IO/",
"lineEnding": "LF",
"instantiateStore": true,
"genTimestamps": false,
"saveOnDeploy": false,
"appName": "MyApp",
"mapsAPI": "http://maps.google.com/maps/api/js?sensor=true"
},
"xdsVersion": "2.0.0",
"xdsBuild": "442",
"framework": "ext40",
"topInstanceFileMap": {
"84cb5e07-224b-4e18-be88-4515b064b374": {
"paths": [
"metadata/view/MyViewport",
"app/view/override/MyViewport.js",
"app/view/MyViewport.js",
"app/view/Viewport.js"
],
"className": "MyViewport"
}
},
"expandedState": {
"data": true,
"model": true,
"component": true,
"controller": true,
"resource": true
}
}
\ No newline at end of file
{
"id": "ExtBox1-ext-gen2509",
"type": "application",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"views": [
"MyViewport"
],
"autoCreateViewport": true,
"name": "MyApp"
},
"customConfigs": [],
"designerId": "application",
"$viewOrder": 0,
"iconCls": "icon-application",
"expanded": true
}
\ No newline at end of file
{
"id": "ExtBox1-ext-gen2897",
"type": "viewport",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"designer|initialView": true,
"layout": "fit",
"designer|userClassName": "MyViewport"
},
"customConfigs": [],
"designerId": "84cb5e07-224b-4e18-be88-4515b064b374",
"$viewOrder": 0,
"expanded": true,
"cn": [
{
"id": "ExtBox1-ext-gen3058",
"type": "tabpanel",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"activeTab": 0,
"designer|userClassName": "MyTabPanel"
},
"customConfigs": [],
"expanded": true,
"cn": [
{
"id": "ExtBox1-ext-gen3068",
"type": "panel",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"title": "General",
"designer|userClassName": "MyPanel"
},
"customConfigs": [],
"expanded": true,
"cn": [
{
"id": "ExtBox1-ext-gen3080",
"type": "tab",
"reference": {
"name": "tabConfig",
"type": "object"
},
"codeClass": null,
"userConfig": {
"designer|userClassName": "TabConfig"
},
"customConfigs": [],
"iconCls": "icon-tab-bar",
"expanded": true
},
{
"id": "ExtBox1-ext-gen4778",
"type": "form",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"border": 0,
"bodyPadding": 10,
"title": null,
"designer|userClassName": "MyForm"
},
"customConfigs": [],
"expanded": true,
"cn": [
{
"id": "ExtBox1-ext-gen5202",
"type": "textfield",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"fieldLabel": "Name",
"designer|userClassName": "MyTextField",
"layout|anchor": "100%"
},
"customConfigs": [],
"expanded": true
},
{
"id": "ExtBox1-ext-gen5455",
"type": "textfield",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"fieldLabel": "Last name",
"designer|userClassName": "MyTextField1",
"layout|anchor": "100%"
},
"customConfigs": [],
"expanded": true
},
{
"id": "ExtBox1-ext-gen5720",
"type": "datefield",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"fieldLabel": "Birthdate ",
"designer|userClassName": "MyDateField",
"layout|anchor": "100%"
},
"customConfigs": [],
"expanded": true
},
{
"id": "ExtBox1-ext-gen5987",
"type": "textareafield",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"fieldLabel": "Comments",
"designer|userClassName": "MyTextArea",
"layout|anchor": "100%"
},
"customConfigs": [],
"expanded": true
}
]
}
]
},
{
"id": "ExtBox1-ext-gen3085",
"type": "panel",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"title": "Groups",
"designer|userClassName": "MyPanel1"
},
"customConfigs": [],
"expanded": true,
"cn": [
{
"id": "ExtBox1-ext-gen3097",
"type": "tab",
"reference": {
"name": "tabConfig",
"type": "object"
},
"codeClass": null,
"userConfig": {
"designer|userClassName": "TabConfig1"
},
"customConfigs": [],
"iconCls": "icon-tab-bar",
"expanded": true
}
]
},
{
"id": "ExtBox1-ext-gen3102",
"type": "panel",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"title": "Contacts",
"designer|userClassName": "MyPanel2"
},
"customConfigs": [],
"expanded": true,
"cn": [
{
"id": "ExtBox1-ext-gen3114",
"type": "tab",
"reference": {
"name": "tabConfig",
"type": "object"
},
"codeClass": null,
"userConfig": {
"designer|userClassName": "TabConfig2"
},
"customConfigs": [],
"iconCls": "icon-tab-bar",
"expanded": true
}
]
}
]
}
]
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>First program</title>
<!-- Importing the stylesheet for the widgets -->
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
<!-- Importing the Ext JS library -->
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
<!-- Importing our application -->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
/**
* This is the main code for the application
*/
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name: 'App',
controllers:['Main'],
launch: function() {
Ext.create('Ext.Window',{
width:630,
height:318,
title:'Ext TreePanel',
autoScroll:true,
frame:false,
layout:'fit',
items:[{
xtype:'treestorepanel'
}]
}).show();
}
});
\ No newline at end of file
/**
* @class MyApp.controller.Main
* @extends Ext.app.Controller
* @author Armando Gonzalez <iam@armando.mx>
*
* The main controller, in here we define all the app logic
*/
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'treePanel',
selector: 'treestorepanel'
}],
requires:['App.view.TreeStoreTreePanel','App.view.NodeForm'],
stores:['Files'],
init:function(){
var me = this;
me.control({
'nodeform #savebtn' : {// we get the save button reference
click : me.addTreeNode
},
'treestorepanel toolbar #deletebtn':{// we get the delete button reference
click : me.deleteTreeNode
}
});
me.getFilesStore().load();
},
addTreeNode:function(btn){
var me = this,node,
tree = me.getTreePanel(),
selectedNode = tree.getSelectionModel().getSelection()[0] || tree.getRootNode(); //get the root node if there is not selection
node = btn.up('form').getValues();//get the form values
if(selectedNode.isLeaf()){ //insert the node in the parent node
selectedNode.parentNode.insertChild(0,node);
}else{//inserting as a child
selectedNode.insertChild(0,node );
}
btn.up('menu').hide();// hide the menu
},
deleteTreeNode:function(){
var me = this,
tree = me.getTreePanel(),
node = tree.getSelectionModel().getSelection()[0];
if(node){
node.remove(true);
}else{
Ext.Msg.alert('Warning', 'Please select a node!');
}
}
});
\ No newline at end of file
/**
* @class App.store.Files
* @extends Object
* This is the definition of our TreeStore
*/
Ext.define('App.store.Files', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'ajax',
url : 'data/files.json'
}
});
\ No newline at end of file
/**
* @class App.view.NodeForm
* @extends Ext.form.Panel
* @author Armando Gonzalez <iam@armando.mx>
* The node form panel
*/
Ext.define('App.view.NodeForm', {
extend: 'Ext.form.Panel',
xtype:'nodeform',
border:false,
frame:true,
initComponent : function(){
var me = this;
me.items = me.buildItems();
me.buttons = me.buildButtons();
me.callParent();
},
buildItems : function(){
var store = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{"value":true, "name":"File"},
{"value":false, "name":"Folder"}
]
});
return [{
fieldLabel : 'Name',
name : 'text',
xtype : 'textfield',
},{
fieldLabel : 'Type',
xtype : 'combo',
name : 'leaf',
queryMode : 'local',
displayField: 'name',
valueField : 'value',
store : store
}];
},
buildButtons:function(){
return [{
text: 'Save',
itemId: 'savebtn'
}];
}
});
\ No newline at end of file
/**
* @class App.view.TreeStoreTreePanel
* @extends Ext.tree.Panel
* This is a tree panel with a tree store configuration.
* @author Armando Gonzalez <iam@armando.mx>
*/
Ext.define('App.view.TreeStoreTreePanel', {
extend: 'Ext.tree.Panel',
xtype:'treestorepanel',
store:'Files',
tbar:[{
text:'Add',
iconCls:'add',
menu:{
items:{
xtype:'nodeform'
}
}
},{
text:'Delete',
iconCls:'delete',
itemId: 'deletebtn'
}],
viewConfig:{ //the view config of our tree panel
plugins:{
ptype:'treeviewdragdrop' // addigng the drag and drop implementation
}
}
});
\ No newline at end of file
[{
"text":"app",
"children":[
{
"text":"app.js",
"leaf":"true",
"iconCls":"js"
},{
"text":"controller",
"children":[]
},{
"text":"model",
"children":[]
},{
"text":"store",
"children":[
{
"text":"Files.js",
"leaf":"true",
"iconCls":"js"
}
]
},{
"text":"view",
"children":[
{
"text":"BasicTreePanel.js",
"leaf":"true",
"iconCls":"js"
},
{
"text":"TreeStorePanel.js",
"leaf":"true",
"iconCls":"js"
}
]
}
]
},{
"text":"data",
"children":[
{
"text":"files.json",
"leaf":"true",
"iconCls":"json"
}
]
},{
"text":"index.html",
"leaf":"true",
"iconCls":"html"
},{
"text":"resources",
"children":[
{
"text":"css",
"children":[
{
"text":"app.css",
"leaf":"true",
"iconCls":"css",
}
]
},{
"text":"images",