yt_ajax / bottle / ytrepl_extpanel.html

<html>
<head>
  <title>yt</title>
	<link rel="stylesheet" type="text/css" href="resources/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="resources/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="resources/ext-all.js"></script>

	<style type="text/css">
	html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
	.x-panel-body p {
	    margin:5px;
	}
    .x-column-layout-ct .x-panel {
        margin-bottom:5px;
    }
    .x-column-layout-ct .x-panel-dd-spacer {
        margin-bottom:5px;
    }
    .settings {
        background-image:url(resources/folder_wrench.png) !important;
    }
    .nav {
        background-image:url(resources/folder_go.png) !important;
    }
    </style>
	<script type="text/javascript">

    var handle_result = function(f, a) {
        Ext.get("output").dom.innerHTML +=
        '>>> ' + f.findField("line").getValue() + '<br/>' + a.result.text + '<br/>';
        f.findField("line").setValue("");
        eval(a.result.execute);
    }

    var repl_input = new Ext.FormPanel({
        url: 'push',
        items: [{
            xtype: 'textfield',
            fieldLabel: '>>>',
            name: 'line',
            allowBlank: 'True',
            bodyStyle: 'font-family: monospace;',
            listeners: {
                specialkey: function(f, e){
                    if (e.getKey() == e.ENTER) {
                        repl_input.getForm().submit({
                            success: handle_result,
                            failure: function(f, a){
                                Ext.get("output").dom.innerHTML +=
                                    '>>> FAILURE<br/>';
                               }});
                    }
                }
            },
        },],
    });

    Ext.onReady(function(){

       // NOTE: This is an example showing simple state management. During development,
       // it is generally best to disable state management as dynamically-generated ids
       // can change across page loads, leading to unpredictable results.  The developer
       // should ensure that stable state ids are set for stateful components in real apps.
       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

       var viewport = new Ext.Viewport({
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [{
                    html: Ext.example.shortBogusMarkup,
                    title:'Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav'
                },{
                    title:'Settings',
                    html: Ext.example.shortBogusMarkup,
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                region:'center',
                margins:'35 5 5 0',
                layout:'column',
                autoScroll:true,
                items:[{
                    columnWidth:1.0,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px; font-family: monospace;',
                    items:[{
                       title: 'Output',
                       html: "",
                       id: "output",
                    }, repl_input, ]
                },]
            }]
        });
    Ext.get("output").dom.innerHTML += 'Welcome to the yt web interface.<br/>';
    }
    
    );
	</script>
</head>
<body>
<script type="text/javascript" src="resources/examples.js"></script><!-- EXAMPLES -->
  </body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.