ExtJS Basic Knowledge Summary: Pop-up window (four)

Overview

　　ExtJS pop-up window can be divided into message popup, dialog box, The way these pop-up windows ExtJS their own Ext.Msg.alert can already satisfy simple message prompts, but relatively complex hints, such as how to nest Ext.grid.Panel control display to Widget.window, and then show it to the page with the Widget.window Show method Where's the face? Here are a few ideas for scenarios

Thought one, directly fills the Gridpandel to the Widget.window corresponding items

　　The code is as follows:

    varInvoiceitemgrid = Ext.create ('Ext.grid.Panel', {forcefit:false, Autoheight:true, AutoScroll:true, Frame:true, Split:false, layout:"Fit", Height:document.documentElement.clientHeight, margin:0, Store:precstore, Loadmask: {msg:'Data Loading ...'}, Columnlines:true,        //dockeditems: [Ptxtinfo],//seltype: "Checkboxmodel",Selmodel: {mode:"Multi",//Multi,simple,single; default is multi-select multiCheckonly:false,//if the value is true, only click the checkbox column to select this recordAllowdeselect:true,//if the value is true and the mode value is single, you can cancel the selection by clicking the checkbox}, Viewconfig: {striperows:true,//Show zebra crossing in tableEnabletextselection:true //You can copy the cell literal "ggxh", "XMSL", "Xmdj", "Xmje", "SL", "SE", "SPBM", "Taxitem" ,}, Bbar: {xtype:"Pagingtoolbar", Inputitemwidth: -, Store:precstore, DisplayInfo:true}, Columns: [{text:"Id", Width: the, Dataindex:"Id", Hidden:true}, {text:"Product Name", Width: the, Dataindex:"Xmmc"}, {text:"Unit", Width: the, Dataindex:"DW"}, {text:"Specification Model", Width: -, Dataindex:"Ggxh"}, {text:"Quantity", Width: the, Dataindex:"XMSL"}, {text:"Project Unit Price", Width: -, Dataindex:"XMDJ"}, {text:"Project Amount", Width: the, Dataindex:"Xmje"}, {text:"Tax", Width: the, Dataindex:"SE"}, {text:"Tax Rate%", Width: the, Dataindex:"SL"}, {text:"Tariff Code", Width: the, Dataindex:"SPBM" },        ]    }); Main formvarWinditem= Ext.create ('Widget.window', {title:'Invoice Details', closable:true, Closeaction:'Hide', modal:true, Frame:true, layout:'Fit', Width:895, MinWidth:895, Height:430, layout: {type:'Border', padding:2}, items: [Invoiceitemgrid]});

The results shown are as follows:

Results analysis: The title of the grid is not displayed, and as the form is stretched, the content is not displayed.

Thought two, directly fills the Gridpandel to the TabPanel items, then TabPanel puts to the widget.window corresponding items

The code is as follows:

    varWinditem= Ext.create ('Widget.window', {title:'Invoice Details', closable:true, Closeaction:'Hide', modal:true, Frame:true, layout:'Fit', Width:895, MinWidth:895, Height:430, layout: {type:'Border', padding:2}, items: [{region:'Center', Xtype:'TabPanel', Items:invoiceitemgrid}] });

the results shown are as follows:

result Analysis: The blue square above the grid is a tag. The TabPanel of ExtJS is automatically generated by grid, which is obviously not the ideal result;

Thinking three, the Gridpandel is filled directly into the from items, and then from the TabPanel items, and then TabPanel placed in the Widget.window corresponding items

The code is as follows:

varDatafrom = Ext.create ('Ext.form.Panel', {hidden:true, bodypadding:0, Width:890, Header:true, layout:'Fit', defaults: {anchor:'100%'}, DefaultType:'TextField', items: [Invoiceitemgrid], buttons: [{text:'Close', Handler:function () {winditem.close ();    }        }]    }); varWinditem= Ext.create ('Widget.window', {title:'Invoice Details', closable:true, Closeaction:'Hide', modal:true, Frame:true, layout:'Fit', Width:895, MinWidth:895, Height:430, layout: {type:'Border', padding:2}, items: [{region:'Center', Xtype:'TabPanel', Items:datafrom}] });

the results shown are as follows:

Results Analysis: Obviously this way relatively better point, thinking 3 is based on the idea of 2, thinking 2 is based on the idea of 1, so good ideas still need to constantly optimize and summarize.

ExtJS Basic Knowledge Summary: Pop-up window (four)