Панели
Панель - основной компонент inx. Панель может содержать дочерние панели.
<script>
inx.conf.url='/inx/version/1199998280/';
inx({"type":"inx.panel","width":200,"autoHeight":true,"items":[{"html":"panel 1","height":30},{"html":"panel 2","height":30},{"html":"panel 3","height":30}]}).here()
</script>
// @include inx.panel
inx.ns("inx.mod.inxdev.example").panel = inx.panel.extend({
constructor:function(p) {
p.autoHeight = 1;
p.width = 300;
var cmpid = this.id();
p.tbar = [
{type:"inx.textfield",width:100,onchange:function() {
inx(cmpid).cmd("setPadding",this.info("value"));
}}
];
this.base(p);
for(var i=0;i<3;i++)
this.cmd("add",{html:"subpanel",autoHeight:true});
}
});<script>
inx({"type":"inx.mod.inxdev.example.panel"}).here()
</script>
Панель может иметь боковые дочерние панели, верхний и нижний тулбары.
Т.к. панель является базовой для множества компонентов: inx.tree, inx.tabs, inx.list и т.д., то
вы можете создать дерево с тулбаром и боковой панелью.
<script>
inx({"type":"inx.tree","loader":{"cmd":"inxdev:example:treeLoader"},"height":200,"width":400,"side":[{"region":"left","width":100,"resizable":true},{"region":"bottom","height":50,"resizable":true}],"tbar":[{"text":"this"},{"text":"is"},{"text":"toolbar"}]}).here()
</script>
Сохранение состояния
Панель может запоминать состояние при помощи хранилища inx.storage. Когда вы в следующий раз придете на страницу,
панель вспомнит размеры боковых панелей, которые вы выставили.
<script>
inx({"type":"inx.panel","height":400,"keepLayout":"uhqkv63y92tc52tmeijm","side":[{"region":"left","width":100,"resizable":true},{"region":"left","width":150,"resizable":true},{"region":"right","width":150,"resizable":true},{"region":"top","height":50,"resizable":true},{"region":"bottom","height":50,"resizable":true}],"tbar":[{"text":"this"},{"text":"is"},{"text":"toolbar"}],"bbar":[{"text":"this"},{"text":"is"},{"text":"toolbar"}]}).here()
</script>